Font-Relative Units

The em unit

.element {
  width: 30em; 
}

The em unit is the value assigned to the element’s font-size, and its exact value changes between elements. The measurement itself is the width of the letter “m.”

The length changes only if we change the font-size. It doesn’t change if the font-family is adjusted. By default, 1em is equal to 16px.

If any CSS changes the font size, 1em becomes the equivalent of whatever the new font-size is.

To return to our example, 30em means 30 times the current font size.

The rem unit

.element {
  width: 30rem; 
}

The rem unit is similar to em, only instead of changing based on the font size of the current element, it changes based on the root (:root {}) element font size.

We can set the font-size once, and the rem measurement will remain consistent throughout all pages!

Which unit should you use?

It’s a matter of personal preference. Some like to use rem units for consistency, while others like to add in em units when it makes sense in relation to adjacent parent elements.

The ex unit

.element {
  width: 40ex;
}

The ex unit is similar to em. However, it’s based on the height of the letter “x.”

Unlike em units, this value can change depending on the font-family used & the font-size.

The ch unit

.element {
  width: 40ch;
}

The ch unit is like the ex unit, except instead of measuring the height of “x,” it measures the width of the number zero.

It also changes as the font-family changes.

Example