How we learned to leave default font-size alone and embrace the em

April 2020 note: Hi! Just a quick note to say that this post is pretty old, and might contain outdated advice or links. We're keeping it online, but recommend that you check newer posts to see if there's a better approach.

Building with em units in CSS brings benefits in flexibility to users and developers alike, but working with ems can be tedious for a number of reasons. Most famously, the value of 1em only vaguely correlates to pixel-based design; the inconvenience of translating fixed design comps into flexible CSS units has long driven web designers to declare a global font-size to make that math a bit easier to manage. But using contemporary responsive design principles is convincing us to leave global font-size alone and embrace the standard em.

Perhaps the most popular global font-size workaround was introduced in Richard Rutter’s brilliant 2004 article, “How to size text using ems,” which revealed that by setting a body font-size of 62.5%, we change the default value of 1em to equal 10 pixels. This of course makes the conversion of pixels to ems dramatically easier. Ever since that article was released, we at Filament Group would typically start our CSS files with that rule, and happily carry on in our developer-convenient way.

But in the recent past, as we began building Responsive layouts—particularly layouts that use flexible em-based media query breakpoints—we’ve encountered several reasons that the practice of setting the body font-size is no longer such a good idea in our own work. We’ve observed that others have seemingly come to this realization as well, but hadn’t seen anyone document why they made the change, so here are the reasons we’ve found:

• The value of 1em, when used in a CSS3 Media Query such as @media (min-width: 20em), is unaffected by the font-size of the body element in most browsers. This means that if we change the font-size of the body to something other than 100%, we will need to calculate em values differently when they’re used in a media query than in a CSS property value. This creates inconsistency across a CSS file that is difficult to maintain and document. (We recall that Opera Mobile or Mini actually behaved differently in this aspect, compounding the issue further, but we couldn’t reproduce in the latest versions of the browsers.)
• A default font-size of 10px is illegibly small for text, so if we use a 62.5% base font-size, we have to specifically set the font-size of every element that appears on our site to make it readable. Alternatively, if we leave the body font-size at 100%, we can allow elements to display in their natural size determined by the browser’s default stylesheet. This makes for lighter CSS and more flexibility in the markup we choose to use.
• Lastly, as we move into the browser earlier and earlier in our design processes, we’re finding that the very idea of an em value relating to pixels is becoming less relevant. Our design decisions are now more commonly informed by the context in which a component lives in the page, and how it adapts fluidly and proportionally within that environment, regardless of its pixel-based scale.

So for those reasons, we’re now tending to leave the body font-size alone, and we’d recommend other developers do the same.

Observant readers may notice that, ironically, at the time of writing this very website is still built using a body font-size of 62.5%. We’re in the process of redesigning this site, and while we haven’t gotten around to changing that part yet, the difficulty in creating our new em-based responsive layout with that default font-size in play was enough to prompt us to write this post!

All blog posts