February 24, 2014

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.

EM values inherit from their parent

See the Pen rCcIh by Jeremy Church (@jeremychurch) on CodePen.1457

PX values do not inherit

See the Pen dlyqw by Jeremy Church (@jeremychurch) on CodePen.1457

Visit pxtoem.com for conversion tables and calculator.

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

You can choose a different ratio/scale and calculate your own values on Type Scale.

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.

EM scales by updating one value

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*/
}

Or, recalculate every PX value

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.

EM will scale padding and margins too

See the Pen AlxHk by Jeremy Church (@jeremychurch) on CodePen.1457

Use REM for consistent padding and margins

See the Pen qjEBs by Jeremy Church (@jeremychurch) on CodePen.1457

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.  ∎

Resources

My favorite em calculator is pxtoem.com. In addition to calculating em or px values, there’s a handy table of the two which really helps to see the relationship.

REM is the same as em except it’s always calculated from the html font size. So, just use the same pxtoem.com calculator to figure out its relation to the root size.