CSS units · Root element font size
rem
One rem equals the root element's font size, typically 16px.
Key facts
| Reference | Root element font size |
|---|---|
| Default | 16px in most browsers |
| Inherits | No; always the root |
| User setting | Respected |
| Common use | Typography and spacing |
| Standard | CSS Values and Units Level 4 |
One reference for the page
rem always resolves against the root element's computed font size, regardless of where it is used. If the root is 16px, 1.5rem is 24px in every context. That predictability makes it the default unit for spacing scales and typography.
Because the root font size follows the user's browser preference, rem-based layouts grow when a user increases the default text size. Setting html { font-size: 62.5% } to make 1rem equal 10px is a common trick, but it changes the reference and can surprise users who expect 16px.
rem versus em
em resolves against the current element's font size, so it compounds through nesting. rem does not compound. Use rem when you want a consistent scale across components, and em when a value should scale with the local font, such as padding inside a button.
Media queries also accept rem. Basing breakpoints on rem means the layout responds to the user's font size as well as the viewport width.
Frequently asked questions
What is 1rem in pixels?
Whatever the root font size is. With the browser default, 16px; if the user changes it, the value changes too.
Does rem compound like em?
No. It always refers to the root, so nesting does not multiply it.