Confused About REM and EM?

REM can be confusing, especially without a solid understanding of its partner EM and their archvillain, the PX.

Relative Units

Both rem and em are relative units, px is not. Before considering rem, it’s important to understand the relationship between em, markup and inheritance.

Below, the example demonstrates how each nested child assumes the parent is 1em(100%). Thus children inherit size by scaling in relation to the parent font size.

While the value remains 0.773em, the actual font size is calculated at 77.3% of its direct parent, which in turn scales from its parent. This continues up the DOM tree whenever a parent has a defined font-size.

In the example, several elements, each with a font size, are nested for a visual effect. You can see it’s not a good practice, because the compound inheritance creates unwanted results. However, you shouldn’t have to worry about this if your CSS and markup are modular to begin with.

Save Lives with EM

Well, maybe not lives, but it will save lines … of code. The following examples do the same thing; update font sizes and padding within a media query. The initial values are calculated by incrementally increasing 1em (16px or 100%) at a 1:1.2 ratio.

html { font-size: 100%; } /*16px*/
h1 { font-size: 2.074em; }
h2 { font-size: 1.728em; }
h3 { font-size: 1.44em; }
h4 { font-size: 1.2em; }
small { font-size: 0.833em; }
.box { padding: 1.25em; }
@media screen and (min-width: 1400px) {
  html { font-size: 125%; } /*20px*/
}

html { font-size: 16px; }
h1 { font-size: 33px; }
h2 { font-size: 28px; }
h3 { font-size: 23px; }
h4 { font-size: 19px; }
small { font-size: 13px; }
.box { padding: 20px; }
@media screen and (min-width: 1400px) {
  html { font-size: 20px; }
  h1 { font-size: 41px; }
  h2 { font-size: 35px; }
  h3 { font-size: 29px; }
  h4 { font-size: 24px; }
  small { font-size: 17px; }
  .box { padding: 25px; }
}

There’s only one em value to overwrite in the media query, because em inherits and scales relative to its parent (html in this case) font size, similar to the way vector paths scale proportionally.

The code is doubled when updating px, because each value has to be recalculated and defined in the media query.

REM as in Root EM

While em is relative to the font size of its direct or nearest parent, rem is only relative to the html (root) font-size. I like to think of it as a reset. If a style sheet is built in a modular fashion, then rem shouldn’t be needed very often, but it can be handy at times.

For example, if you’re trying to achieve consistent spacing without extra markup, rem can be used to define the padding and margins.

PX can be used for consistent padding and margins too, but it doesn’t scale across media queries like em and rem.

Conclusion

I use em for nearly everything, rem occasionally for padding or margins, but only in a pinch, and px some times for borders.

For the most part, I want children to inherit size. If a sidebar is going to be a smaller font size, then I expect all its children to resize proportionally without having to calculate and redefine individual selectors.

I struggle to think of a good reason to use rem for font-size values, but I’m sure there are exceptions. If I’m trying to reset a font size with rem, it’s probably a sign my CSS is not very modular and due for a refactor.

I use rem more than I used to. I still tend to set the font-size of headers in em, but I can see where rem would be beneficial for some headers and other text. I also use rem for most margins, and sometimes for padding too.  ∎