PX to REM formula
rem = px ÷ base font-size Example: 24px ÷ 16px = 1.5rem
Unlike em units, rem (Root EM) is always calculated relative to the root font size defined on the html element, which defaults to 16px in modern browsers. If your design system uses a custom baseline, such as setting html to 62.5% so 1rem equals 10px, adjust the base input above accordingly.
Common reference points
| Pixels | Rem (at 16px base) |
|---|---|
| 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 |
Frequently asked questions
How do I convert px to rem?
Divide the pixel value by the root font-size, which is 16px by default in every browser unless your site's CSS overrides it.
What is 16px in rem?
1rem, assuming the standard 16px root font-size.
Why use rem instead of px in CSS?
Rem scales with the user's font-size preference (including browser zoom and accessibility settings), while px stays fixed regardless — rem is generally preferred for anything text-related for that reason.