Quick answer: CSS font-size conversions are only exact when you know the relevant context. If the root font size is 16px, then 1rem = 16px and 1.5rem = 24px. An em value depends on the element’s inherited/parent font-size context, so it cannot always be converted to one universal pixel value.
Common Font Size Conversion Formulas
| Conversion | Formula |
|---|---|
| px → rem | pixels ÷ root font size |
| rem → px | rem × root font size |
| px → em | pixels ÷ relevant parent/inherited font size |
| em → px | em × relevant parent/inherited font size |
| percent → em | percentage ÷ 100 |
The common examples below assume a 16px root or parent value where stated. That is an assumption for calculation, not a rule that every website must use.
px to rem
If the root font size is 16px:
- 16px ÷ 16 = 1rem
- 20px ÷ 16 = 1.25rem
- 24px ÷ 16 = 1.5rem
- 32px ÷ 16 = 2rem
If the user or stylesheet changes the root size, the pixel result represented by a rem value changes accordingly.
rem to px
Multiply the rem value by the root font size. With a 16px root, 1.25rem × 16 = 20px.
em to px
em is contextual. If an element’s relevant font-size context is 20px, then 1.5em corresponds to 30px for that calculation. Nested relative sizing can compound, which is why an em value should not be presented as having one fixed pixel equivalent.
Percent Font Sizes
A percentage font size is relative to the inherited font size. If the parent computes to 16px, then 125% computes to 20px. In proportional terms, 100% corresponds to 1em and 125% to 1.25em in the same context.
What About pt to px?
CSS defines absolute units with fixed relationships: 1 inch equals 96 CSS pixels and 1 point equals 1/72 of an inch. Therefore, in CSS reference units, 1pt = 4/3 CSS px and 12pt = 16 CSS px. Physical display size can still depend on the device and rendering environment.
Quick Conversion Table at a 16px Root
| px | rem | Percent |
|---|---|---|
| 12 | 0.75rem | 75% |
| 14 | 0.875rem | 87.5% |
| 16 | 1rem | 100% |
| 18 | 1.125rem | 112.5% |
| 20 | 1.25rem | 125% |
| 24 | 1.5rem | 150% |
| 32 | 2rem | 200% |
Which Unit Should You Use?
There is no single correct unit for every property. rem is convenient for typography tied to a root scale; em is useful when a component should scale relative to its own text context; percentages can express inherited relative sizing; and pixels can be appropriate when a CSS-pixel value is intentionally required.
For guidance on choosing readable sizes rather than converting units, see our Website Font Size Guide.
Common Conversion Mistakes
- Assuming 1rem always equals 16px without checking the root size.
- Treating em as an absolute unit.
- Forgetting nested relative font sizing.
- Confusing CSS pixels with physical device pixels.
- Converting units without considering why a relative unit was chosen in the first place.
Frequently Asked Questions
How many pixels is 1rem?
It equals the computed root font size. With a 16px root, 1rem is 16 CSS pixels.
Is 1em always 16px?
No. The computed value depends on the relevant inherited font-size context.
Is 12pt equal to 16px in CSS?
Under CSS absolute-unit definitions, 12pt corresponds to 16 CSS px.
Last reviewed: October 2026.
