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.