PX ↔ REM ↔ EM ↔ PT Converter
Convert CSS units both ways with a configurable root size — px, rem, em and pt update together.
527 views
How the Units Relate
rem = px ÷ root size (16 px by default, so 24 px = 1.5rem); em works the same but against the element's own inherited font size — the converter's "context size" field; pt is the print unit at 1pt = 1.333px (96dpi ÷ 72). Type in any field and the rest follow.
Practical rule: use rem for font sizes and spacing so user font-size preferences scale the layout; em for paddings that should track their component's text; px only for things that must not scale (hairline borders). Changing the root to 10 px (the old 62.5% trick) makes mental math easy but is worth avoiding in new projects — component libraries assume 16.
Frequently Asked Questions
Why does my em value differ from rem?
em multiplies against the nearest set font-size, which nests: a 1.5em inside a 1.5em element is 2.25× the root. rem always references the root — that predictability is why it won.
Is 1pt really 1.333px?
In CSS, yes by definition: 1in = 96px = 72pt. Print PDFs and CSS agree on the ratio, though physical size depends on the actual screen DPI.
Similar Tools
Report a Problem
PX ↔ REM ↔ EM ↔ PT Converter