CSS unit converter
Convert between px, rem, em, pt and % against a configurable root font size. Type a value and copy any unit.
About this CSS unit converter
Type a value, pick its unit, and instantly see it in px, rem, em, pt and % — each with a copy button. Set the root font size to match your project (16px is the browser default) and every relative unit recalculates.
How it works
All units are converted through pixels. rem, em and % are taken relative to
the base font size you provide; pt uses the CSS standard where 1pt is 1⁄72 inch
and 1px is 1⁄96 inch, so 12pt equals 16px. Switch the base to see how the same px
value maps to different rem values.
When to use it
Convert design-tool pixel values to rem for accessible, user-scalable typography and spacing, or back to px to sanity-check a computed size. For building full type scales and spacing systems, pair it with the other CSS tools in the catalog.
FAQ
How is rem converted to px?
One rem equals the root font size, which you can set (16px by default). So at the default base, 1rem is 16px and 24px is 1.5rem.
What base does em use here?
For convenience this tool treats em like rem — relative to the base you set. In real pages em is relative to the parent element's font size, so adjust the base to match that context when you need element-relative values.
Why convert px to rem at all?
Sizing in rem lets your layout scale with the user's browser font-size setting, which is better for accessibility than fixed pixels. Designers often work in px, so converting to rem is a common last step.