Understanding and Using rem Units in CSS

1rem equals the font size of the html element (which for most browsers has a default value of 16px). The em units are relative to the font size of their own element.

Let’s consider the following example, where we want lists to have a font size of 12px, in the case where the root font size is the default 16px:

html {
font-size: 100%;
}

ul {
font-size: 0.75em;
}

If we have a list nested inside another list, the font size of the inner list will be 75% of the size of its parent (in this case 9px).

ul ul {
font-size: 1em;
}

With rem units, things are a simpler, as all the sizes are referenced from the root font size, there is no more need to cover the nesting cases in separate declarations.

html {
font-size: 100%;
}

ul {
font-size: 0.75rem;
}