On ems and rems
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.
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 body
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 rems and 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 (<html>) 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.
Meanwhile, 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 px- or 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.