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 incrementing 1em(16px) at a 1:1.2 ratio.

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

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.