PX to REM Converter
Convert px to rem and back at any root font size, with a table.
1.5rem
Common values at 16px root
- 12px0.75rem
- 14px0.875rem
- 16px1rem
- 18px1.125rem
- 20px1.25rem
- 24px1.5rem
- 32px2rem
- 40px2.5rem
- 48px3rem
- 64px4rem
rem is relative to the root (html) font size — 16px in most browsers by default. So at a 16px root, 24px equals 1.5rem. Change the root if your design uses a different base (a common trick is 62.5%, i.e. 10px, so 1rem = 10px). Using rem keeps layouts scaling with the user's preferred text size.
How to convert px to rem
Enter a pixel value and the root font size; the rem equivalent appears instantly. Switch the direction to go from rem back to pixels. A table of common sizes updates to match your chosen root.
The math
rem = px ÷ root font size. At the default 16px root, 24px is 1.5rem and 8px is 0.5rem. Pick the root your stylesheet actually uses to get values that match your design.
Questions
What root font size should I use?
Browsers default the root (html) font size to 16px, so that's the default here. Change it if your CSS sets a different base — a popular pattern is 62.5%, which makes 1rem equal 10px for easy mental math.
Why use rem instead of px?
rem scales with the user's chosen font size, so text and spacing respect accessibility settings. Sizing in rem keeps a layout proportional when someone bumps up their default text size in the browser.