How we learned to leave default font-size alone and embrace the em
Posted by Scott, Mat, Zach, and Patty on 07/18/2012
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
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
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
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
bodyelement in most browsers. This means that if we change the
bodyto something other than 100%, we will need to calculate
emvalues 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
font-size, we have to specifically set the
font-sizeof every element that appears on our site to make it readable. Alternatively, if we leave the
font-sizeat 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
emvalue 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
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
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!
Thoughts? We'd love to hear your ideas below.