Question

working on converting our company site over to something more responsive so reworking the css to use em‘s instead of the tried and true px.

The problem i’m running into is the inheritance of font-size and am looking for best practices for this issue.

This is how I’m solving the problem as of now.

jsfiddle for your viewing pleasure

HTML

<h3>Heading with a <a href="#">Link</a></h3>

<p>this is a paragraph with a <a href="#">Link</a> inside of it</p>
<a href="#">this is a link outside the paragraph</a>​

CSS

body {font:normal 100% sans-serif;}
p {font:normal 1.5em sans-serif; margin-bottom:.5em;}
h3 {font:bold 3em serif; margin-bottom:.5em; }
a:link {font-size:1.5em;}

p a, li a, h1 a, h2 a, h3 a, h4 a, h5 a,
h6 a, dl a, blockquote a, dt a, dd a, td a {
    font-size:1em !important;
}

I understand that em‘s are related to the parent font-size. so if I set p{font-size:1.5em;} and also set a:link{font-size:1.5em;} and my <a> is outside of my <p> then they will have the same relative size, great.

But if i then place an <a> inside a <p> the font size of the embedded <a> is now larger as it is 1.5em‘s larger than the <p>. To overcome this I set the last style with a string of p a, li a, h1 a,......{font-size:1em !important;}. Since a:link has a higher specificity than just p a i had to use !important (not a fan of !important), also i can’t use font-size:inherit; as we have to support, dare i say it, ie6 (still have 15% traffic, we are biotech and some companies just refuse to upgrade).

So my question to you is this. Am I going about this the right way in tackling tags inside of tags to prevent my typography from breaking up? As soon as i wrote the last style i thought to myself, this can become a nightmare to maintain! I would like to use rem but the browser support isn’t there for a portion of users.

How do you solve this problem in your own css and what would be a “best practices” approach to this.

Answer 1

Set font size for blocks only, such as headings and navigation blocks. Changing font inline causes a mess, so just don’t set font size for, say, links. Instead, when desired, set the font size of a ul or div or other element that contains navigation links.

In general, use as few font-size settings as possible, to minimize risks of unwanted cumulative effects.

Notes:

This is not about inheritance at all. When you set font-size on an element, the element certainly does not inherit font size. This is about the effect of the relative nature of the em unit.

Should you have set a:link{font-size:1.5em;} for example, you can easily override it for links inside paragraphs without using !important. You just have to be more specific, and the natural way here would be p a:link{font-size:1em;}.