PX to REM Converter
Convert CSS pixels to rem and back. Set your root font size (16 px in most browsers) and type in either box.
About this tool
rem is relative to the root (html) font size; em is relative to the parent element, so the em value here assumes the parent uses the root size. 1 CSS point is 4/3 px.
Convert CSS pixel values to rem units, and rem back to pixels, for responsive web design. Using rem for font sizes and spacing lets text scale when someone changes their browser’s default font size, which helps people who need larger text.
How to use the PX to REM Converter
- Check the root font size. Browsers use 16 px unless the site or the user changes it.
- Type a pixel value to get rem, or a rem value to get pixels.
- Use the em, point and percent values if you need them.
24 px at a 16 px root
rem = px ÷ root font size, so 24 ÷ 16 = 1.5rem. Going back, 1.5rem × 16 = 24 px. If a site sets the root to 10 px, 24 px becomes 2.4rem. In points, 24 px × 0.75 = 18pt, because 1 CSS point is 4/3 of a pixel.
Common sizes at a 16 px root
Worked out with this converter.
| Pixels | rem | Points |
|---|---|---|
| 10 px | 0.625rem | 7.5pt |
| 12 px | 0.75rem | 9pt |
| 14 px | 0.875rem | 10.5pt |
| 16 px | 1rem | 12pt |
| 18 px | 1.125rem | 13.5pt |
| 20 px | 1.25rem | 15pt |
| 24 px | 1.5rem | 18pt |
| 32 px | 2rem | 24pt |
| 48 px | 3rem | 36pt |
| 64 px | 4rem | 48pt |
rem, em and px
A rem is the font size of the root (html) element. For font size, an em is relative to the parent element’s font size (for other properties, to the element’s own), so ems compound when you nest elements: 1.2em inside 1.2em is 1.44 times the outer size. Pixels are fixed. Most design systems use rem for type and spacing, keep pixels for borders and fine details, and avoid setting the root size in pixels so user preferences still apply.
Common mistakes
- Assuming the root is always 16 px. Check the site’s CSS for an html font-size rule.
- Setting html { font-size: 62.5% } and then forgetting to set a body size, which leaves text tiny for parts of the page.
- Using em where you meant rem, then getting bigger and bigger text in nested lists.
Frequently asked questions
How many pixels is 1rem?
16 px with browser defaults. It equals the root font size, whatever that is set to.
How do I convert px to rem?
Divide by the root font size: 18 px ÷ 16 = 1.125rem.
Is em the same as rem?
Only when the parent element has the root font size. em follows the parent, rem always follows the root.
How many pixels is 1pt?
1.333… px. 1 CSS inch is 96 px and 72 pt, so 1pt = 96 ÷ 72 px.