Why I prefer rem over em

#css #html

I always prefer to use rem units over em units in CSS.

Definitions

Rem represents the root element's font-size. The root element for a HTML document is almost always the html element.

Em represents the current element's font-size. This value can and does change while CSS rules are being applied.

Why I prefer rem

There are two main reasons why I prefer rems:

Rem's value does not change in a CSS rule

Take for example this rule with inherited font-size 18px:

html {
  font-size: 18px;
}
.page {
  font-size: 2em;
  margin: 1em;
}

How many pixels wide is the font-size?
How many pixels wide is the margin?

They are both 36px wide even those the number of ems are different!

This is because the font-size for the element changed and all properties calculated after that will use this new font-size.

In comparison, the same rule with rems instead:

html {
  font-size: 18px;
}
.page {
  font-size: 2rem;
  margin: 1rem;
}

How many pixels is the font-size?
How many pixels wide is the margin?

The font-size is 36px and margins are width 18px.

Rems scale the whole page

If a user sets their browser or personal css file to use a larger base font, it is inherited everywhere!

The browser/personal css is the last file in the cascade (minus anything styled directly on an element).

Don't fight users. They know what font-size works best for their eyes.

Not breaking the flow

Having a website that can work with this kind of resizing requires using other CSS length units like percentages and viewport height/width (vh & vw). Using these other units will help to keep the rhythm and flow of the page similar at vastly different base font-sizes.

It is important to remember not everyone uses super high resolution monitors or the same resolution as you.

Top comments (8)

Facundo Corradini • Feb 12 '20 • Edited

Hey Jenn!

You seem to be confused about how CSS declaration blocks works. The order on which you declare CSS properties inside the declarations block have no effect whatsoever on the other properties. The font-size declaration could be the very first in that block or the very last, and the results wouldn't change.

In your em example, both the margins as the paddings are 36px, as they both scale to the element's given font-size.
Here's a quick demo using your code (plus some backgrounds to demonstrate exactly where the margin, padding and content boundaries are): jsfiddle.net/82vcemqd/

Using rem for everything doesn't scale well, and you might simply use px then. It's not a matter of choosing one or the other for every single thing: Rem shines for scaling text, while em is better for things that should be relative to the font-size, such as the paddings.

Ben Calder • Feb 12 '20 • Edited

~~You seem to have misunderstood the post since nowhere does it suggest the order of declared CSS properties affects the outcome.~~

I'm guessing the intent was to highlight the different behaviour when you nest multiple elements with em or rem units applied: jsfiddle.net/blindfish/2xqc1f9d/18/

The general consensus when I last did any serious research on the matter (a while ago) was that for predictable results em should be used with caution. IIRC there was a fun IE bug that didn't help its reputation much.

And to clarify the difference: