What is REM?
REM (root em) is a relative CSS unit that ties every measurement back to a single source of truth: the font size on the <html> element. When you write font-size: 1.5rem, the browser multiplies 1.5 by whatever the root font size happens to be. If the root is the standard 16px, 1.5rem resolves to 24px. If a user has bumped their browser font size to 20px, the same declaration resolves to 30px -- and the entire layout scales along with it.
This single-anchor behavior is what separates REM from the older em unit, which compounds relative to the nearest parent element and can produce surprising results in deeply nested markup.
The Formula
Converting a pixel value to REM requires only one division:
[\text{REM} = \frac{\text{Desired Font Size (px)}}{\text{Default Font Size (px)}}]
Where:
- Desired Font Size is the target size you want to express in REM.
- Default Font Size is the root font size of the document, typically 16px in most browsers.
Calculation Examples
Example 1
Suppose your root font size is 18px and you want to set a heading to 27px:
[\text{REM} = \frac{27}{18} = 1.5]
The heading should be set to 1.5 rem.
Example 2
With the browser default of 16px and a desired size of 24px:
[\text{REM} = \frac{24}{16} = 1.5]
Again the result is 1.5 rem, even though the pixel values differ from the first example. The ratio is what matters.
PX to REM Cheat Sheet
The table below assumes a default root font size of 16px.
| Pixels | REM |
|---|---|
| 10px | 0.625 rem |
| 12px | 0.75 rem |
| 14px | 0.875 rem |
| 16px | 1 rem |
| 18px | 1.125 rem |
| 20px | 1.25 rem |
| 24px | 1.5 rem |
| 28px | 1.75 rem |
| 32px | 2 rem |
| 36px | 2.25 rem |
| 40px | 2.5 rem |
| 48px | 3 rem |
| 64px | 4 rem |
Why REM Matters for Accessibility
Hard-coded pixel values ignore user preferences. When someone increases their browser's default font size for readability, layouts built in pixels refuse to budge. REM-based designs, on the other hand, honor that preference automatically because every measurement traces back to the root font size.
This is not just good practice -- the Web Content Accessibility Guidelines (WCAG) recommend using relative units so that text can be resized without assistive technology up to 200% without loss of content or functionality.
REM vs. EM vs. PX
- PX -- absolute, fixed, ignores user font preferences.
- EM -- relative to the parent element's font size. Compounds when nested, which can lead to unexpected scaling.
- REM -- relative to the root element's font size. Does not compound, making it predictable at any nesting depth.
For most modern projects, REM is the preferred unit for typography and spacing because it combines the scalability of relative units with the predictability of a single reference point.