Browser default is 16px
16px =
1rem
font-size: 1rem; /* 16px */
| Pixels | REM | CSS | |
|---|---|---|---|
| 8px | 0.5rem | ||
| 10px | 0.625rem | ||
| 12px | 0.75rem | ||
| 14px | 0.875rem | ||
| 16px | 1rem | ||
| 18px | 1.125rem | ||
| 20px | 1.25rem | ||
| 24px | 1.5rem | ||
| 32px | 2rem | ||
| 48px | 3rem | ||
| 64px | 4rem |
Formula: rem = px / base font size
Why REM? REM units scale with the user's browser font size settings, improving accessibility.
62.5% trick: Set html { font-size: 62.5%; } to make 1rem = 10px for easier mental math.