CSS em Vs rem

The two most used font size-relative measurements in CSS are em and rem. Both refer to the width of the capital letter "M" in traditional fonts, like Arial. The font size affects the width.

Measurement 1em is relative to the size of the font being published. Size 2em is twice that.

Size 1rem is the width of the letter "M" at the browser's default font size.

The font size-relative measurements em and rem can be used for dimensions, spacing, and thickness. Here is a demonstration using em for measurements:

Adjust number to adjust font size:

The code for the demonstration is below. (How to adjust font sizes within a box is outside the scope of this article.)

<div style="font-size:20px; width:10em; border:.25em dotted black; padding:.5em;">
Change my font size. The box width, border thickness, and padding all adjust accordingly.
</div>

Note: If you change all the em sizes with rem sizes in the above code, there will be no size and dimension shifts. That's because rem is the browser default. It won't change unless the user changes the browser setting.

If you try to set a font size with an em value, the em value will be obtained from the parent element. If there is no parent, then the value of em will be the same as the rem value.

An em is variable. It changes whenever you change the font size.

A rem is not variable, generally a 16px "M". But the default browser size can be adjusted in browser settings.

Which font-relative measurement you use depends on which gives you the properties you desire.

For automatically adjustable things, like the demonstration, em typically works well. For boxes and spacings and fonts that you won't want changed, rem is the most likely candidate.

(This content first appeared in Possibilities newsletter.)

Will Bontrager