px to rem converter
rem is the CSS unit that scales with the user's font-size setting; pixels do not. Type either value and the other updates, with the base font size adjustable for projects that change the root size.
16 px = 1 rem · 24 px = 1.5 rem · 14 px = 0.875 rem (base 16 px)
rem = px ÷ base · px = rem × base · em works the same way but against the parent's font size, not the root's.
Common values
| px | rem (base 16) | rem (base 14) | rem (base 18) |
|---|---|---|---|
| 8 px | 0.5 rem | 0.571 rem | 0.444 rem |
| 10 px | 0.625 rem | 0.714 rem | 0.556 rem |
| 12 px | 0.75 rem | 0.857 rem | 0.667 rem |
| 14 px | 0.875 rem | 1 rem | 0.778 rem |
| 16 px | 1 rem | 1.143 rem | 0.889 rem |
| 18 px | 1.125 rem | 1.286 rem | 1 rem |
| 20 px | 1.25 rem | 1.429 rem | 1.111 rem |
| 24 px | 1.5 rem | 1.714 rem | 1.333 rem |
| 28 px | 1.75 rem | 2 rem | 1.556 rem |
| 32 px | 2 rem | 2.286 rem | 1.778 rem |
| 36 px | 2.25 rem | 2.571 rem | 2 rem |
| 40 px | 2.5 rem | 2.857 rem | 2.222 rem |
| 48 px | 3 rem | 3.429 rem | 2.667 rem |
| 56 px | 3.5 rem | 4 rem | 3.111 rem |
| 64 px | 4 rem | 4.571 rem | 3.556 rem |
| 72 px | 4.5 rem | 5.143 rem | 4 rem |
| 96 px | 6 rem | 6.857 rem | 5.333 rem |
When to use which unit
Use rem for font sizes, spacing that should grow with the text, and media queries, so that a user who sets a larger default font gets a larger layout. Use em for things that should scale with their own element's text, such as padding inside a button. Use px for hairlines, borders and anything that must stay a fixed number of device pixels. For print, points and millimetres are converted on the paper sizes page; for physical screen size, the PPI calculator.
Frequently asked questions
1.5 rem at the default 16 px root size (24 ÷ 16). If the root font size is 14 px it is 1.714 rem.
16 px in every browser by default, because the root font size is 16 px unless the site or the user changes it. That user setting is the reason rem exists: text sized in rem follows it, text in px ignores it.
rem is relative to the root element’s font size, em to the parent’s. Nested elements sized in em compound (1.2 em inside 1.2 em is 1.44 times the base); rem does not.
It makes the arithmetic easier (1.6 rem = 16 px) and still respects user settings, but it changes the default size for anything not explicitly sized. Most teams now keep 16 px and use a converter or a preprocessor function instead.