Riding the Cascade to Simpler Font Styling
Setting typography on websites can be really difficult depending on the site's design. I've seen quite a few sites lately with a large number of overriding font-size declarations because of nested elements.
The problem:
body {
font-size: 62.5% /* 10px */;
}
p {
font-size: 1.2em /* 12px */;
}
Since default font size for browsers is normally 16px, setting the body to 62.5% results in a font-size of 10px. Sounds good so far. Setting the font-size of 1.2em on ‘p’ gets you your desired 12px. Excellent, except that 1.2em compounds when you nest a ‘p’ inside another container.
aside {
font-size: 1.2em;
}
Now your paragraphs are all 1.2*1.2em or 14.4px. That’s not what we want! Lets fix it.
aside p {
font-size: .85714em;
}
You’ll need to do that everywhere nesting occurs and for each element that you’ve set a relative font-size.
The solution:
Since our sites are often composed of paragraphs of text, why not set the body font size to the desired size to begin with.
body {
font-size: .75em;
}
That's it, there’s no need to set a font-size on the ‘p’ since it inherits it’s size from the ‘body’ and it won't compound in another container with a font-size.