On ems and rems
Posted by Scott on 07/19/2012
In our most recent post, How we learned to leave default font-size alone and embrace the
em, we noted a few reasons why we’ve recently stopped setting a
font-size in our CSS. Several readers commented that they now prefer using
rem units instead of
ems, and as a result, they don’t run into the issues we observed. We agree that
rems are fantastic, but thought we should note that
ems serve different purposes and need not be mutually exclusive; both can be very useful in the same CSS layout, depending on what you’re trying to do!
Perhaps the most attractive aspect of
rems is that they are always relative to the root element's (
font-size regardless of the context in which they are used in an HTML document. In other words,
1rem always equals the same thing (by default, usually about
16px), and that consistency does make
rems a lot easier to work with than
em units, which are relative to the
font-size of the parent of the element you're styling. (If you're new to
rem units, we'd recommend checking out Jonathan Snook's great article on the topic.)
But that same benefit of
rems also means that they can be less helpful when designing proportional whitespace, such as padding and margins that surround the typography in a fluid layout. This is where
em units shine. Take for example, a block of content that contains a heading and a paragraph. The amount of spacing that feels comfortable between the heading and the paragraph (and the space between them and adjacent pieces of content) will often change depending on the size of the text. Using
em units for the margins and padding in cases like this mean the spacing will automatically adjust in proportion to the
font-size, regardless of what it may be. If used in this same situation,
rems would require manual adjustment. This jsbin example attempts to demonstrate this difference simply, but it becomes more obvious when designing complex, gridded layouts.
ems come with another benefit: when components are set entirely in
ems, they scale in unison depending on the
font-size of their containing element. This can be very powerful, particularly when reusing the same components in different parts of a layout, where it might make sense for a component to be larger or smaller as a whole.
rems have another potential downside. If you care to support Internet Explorer 8 and older, or any version of Opera Mini, you’ll need to provide a fallback
em-based number alongside every use of
rems, which makes our jobs a little harder, while increasing the code weight that we’re delivering to the user (however minimally).
To sum things up,
rems are a great emerging technology. Knowing when it’s a good idea to use them, and when it’s not, is something we’re still considering ourselves.