px ↔ rem ↔ em
px / rem / em conversion with a configurable base
rem is relative to the root, em to the parent context.
Convert pixels to rem or em and back, based on your project's root font size. Handy as soon as a mockup arrives in pixels while the stylesheet works in relative units.
How it works
A rem is always relative to the root element's font size, 16px by default in every browser. An em is relative to its parent's font size, so nested ems multiply, which explains a good share of layout surprises.
rem = px ÷ root size px = rem × root size (default root size: 16px)
Common values
| px | rem |
|---|---|
| 12px | 0.75rem |
| 14px | 0.875rem |
| 16px | 1rem |
| 18px | 1.125rem |
| 20px | 1.25rem |
| 24px | 1.5rem |
| 32px | 2rem |
| 48px | 3rem |
| 64px | 4rem |
Frequently asked questions
Should I prefer rem or px?
A rem respects the font size the user picked in their browser, which a pixel ignores. For text sizes and spacing, rem is the accessible choice. Pixels still make sense for hairline borders or values that must not scale.
What is the difference between rem and em?
A rem starts from the document root and therefore always resolves to the same value. An em starts from its immediate parent and compounds: inside a 1.2em container, a 1.2em text ends up at 1.44 times the starting size.
Why is 16px the reference?
It is the default font size of every desktop browser. Some projects redefine it to 10px to simplify the maths, at the cost of accessibility. Change the value in the tool if that is your case.