Skip to Main Content


Minneapolis 2470 University Ave W
St Paul, MN 55114
(651) 646-0696

New York City 1216 Broadway, 2nd Floor
New York, NY 10001
(929) 322-4971

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.

Resources and Looking to the future:

Sign Up For Our Newsletter

Join to receive updates, inspiration, and news in your inbox from time to time.