1 rem to px = 16px
1 rem equals 16 pixels at the default root font size of 16px. Adjust the root size below to recalculate.
What’s 1rem used for?
1rem is the foundational unit — equal to the root font size, which defaults to 16px in every browser. Treating 1rem as your 'one unit' for spacing, font-size, and component sizing gives you a layout that scales cleanly with the user's font-size preferences. Most well-built design systems treat 1rem as the canonical base.
How it works
To convert 1rem to pixels, multiply by the root font size: 1 × 16 = 16. The rem unit is relative to the root element’s font size, which browsers default to 16px.
1rem at different root sizes
If you’ve overridden the html root font size, the pixel equivalent of 1rem shifts. Here’s 1rem at common root sizes.
| Root size | 1rem in px |
|---|---|
| 16px (default) | 16px |
| 12px | 12px |
| 14px | 14px |
| 18px | 18px |
| 20px | 20px |
| 24px | 24px |
1rem in CSS
Use 1rem as the html root or body font size — the safest default.
html {
font-size: 1rem; /* browser default */
}
body {
font-size: 1rem;
line-height: 1.5;
}FAQ
Is 1rem the same as 16px?
Yes, at the browser default root font size of 16px. If the root has been changed (some sites use html { font-size: 62.5% } or similar), the conversion changes — see the table above for 1rem at other root sizes.
Why use 1rem instead of 16px?
Because 1rem scales with the user’s browser font-size preference, and 16px does not. If a user enlarges their default font size for accessibility, anything sized in rem scales proportionately — including this value. Use rem for type and type-adjacent properties; reach for px only when the value must stay fixed regardless of user settings.