Why I prefer rem over em

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 {  padding: 1em;  font-size: 2em;  margin: 1em;}

• How many pixels wide is the padding?
• How many pixels wide is the margin?

The padding is 18px wide but the margins are 36px wide!

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 {  padding: 1rem;  font-size: 2rem;  margin: 1rem;}

• How many pixels wide is the padding?
• How many pixels wide is the margin?

The padding and margins are the same 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.