When you need this conversion
You’re reading CSS, a design token file or a component library written in rem and need the pixel size: to match a design, to check a value in Figma, or to tell whether 0.875 rem is really 14 px. Multiply by the root font size.
Reading design tokens
Many design systems publish a type scale in rem. At a 16 px root:
- 0.75 rem = 12 px (small print, labels)
- 0.875 rem = 14 px (secondary text)
- 1 rem = 16 px (body)
- 1.25 rem = 20 px, 1.5 rem = 24 px, 2 rem = 32 px (headings)
Spacing scales work the same way: a 0.25 rem step is 4 px, 0.5 rem is 8 px.
What rem doesn’t depend on
Unlike em, rem ignores the parent element. A 1.5 rem heading inside a small caption is still 24 px. The only thing that changes it is the root font size, which is why it’s the safer unit for most layout and type.
Common mistakes
Assuming 1 rem is always 16 px. It is only the default. Sites using the 62.5% trick make it 10 px, and users can change it in their browser settings.
Reading em values as rem. 1.5 em inside a 20 px parent is 30 px, not 24 px. Check which unit you have before converting.
For the reverse, use the pixels to rem converter.