On ems and rems

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.

All blog posts