PX ↔ REM ↔ EM ↔ PT Converter
Convert CSS units both ways with a configurable root size — px, rem, em and pt update together.
815 views
How It Works
rem = px ÷ root size (16px by default, so 24px = 1.5rem); em works the same way but against the element's own inherited font size — the converter's "context size" field; pt is the print unit, where 1pt = 1.333px (96dpi ÷ 72). Type into any field and the rest follow automatically.
Worked example: on a 16px base, a 1.25rem heading renders at 20px. Nest a 0.875em label inside a component whose own font-size is 1.125rem (18px), and it renders at 15.75px — because em compounds against its immediate parent, not the root.
What to Know
- rem is relative to the root element, not to a fixed browser default. The 16px assumption only holds if nobody has changed it. If a user increases their browser's default font size in accessibility settings — common among people with low vision — every rem-based value scales up proportionally with it. Pixel values do not: a 16px paragraph stays 16px no matter what the user's browser preference is.
- This is why accessibility guidance favors rem for font-size and spacing. A layout built in rem respects the user's chosen text size end to end — headings, body copy, and the spacing around them all grow together, keeping the design proportional instead of breaking when text gets larger.
- em is relative to its own nesting, which compounds. A 1.5em value inside another 1.5em-sized element renders at 2.25× the root — useful for components that should scale with their own font-size context (like button padding), risky for anything nested several levels deep.
- The old "62.5% trick" — setting the root to 10px so 1rem = 10px, for easy mental math — still works but is worth avoiding in new projects: most component libraries assume a 16px root, and overriding it can produce unexpected sizing in third-party code.
- pt is defined against px, not the other way round. CSS fixes the ratio at 1in = 96px = 72pt, so 1pt = 96/72 = 1.333px exactly. This matters mainly when exporting a design to print or PDF, where pt is the native unit — the conversion keeps on-screen and printed sizes consistent.
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.
Why do accessibility guidelines recommend rem over px for text?
Because rem scales with the user's font-size preference and px does not. Someone who increases their browser's default text size — a common low-vision accommodation — sees every rem-based font-size and spacing value grow proportionally, while pixel-based text stays locked at its original size, which is exactly the failure mode accessibility audits flag.
What happens to rem values if a user changes their browser's default font size?
They scale automatically. If the root font-size is left at the browser default and a user sets that default to, say, 20px instead of 16px, every 1rem in your CSS now equals 20px instead of 16px — no code changes needed. This only works if the root font-size itself is left unset or defined relatively, not hard-coded in px.
Should I ever use px at all?
Yes, for things that genuinely must never scale with text: hairline borders, fixed-size icons, or 1px shadows. The practical rule most teams use is rem for font-size and layout spacing, em for component-relative padding, and px only for details that should stay visually constant regardless of the user's text-size setting.
Similar Tools
Report a Problem
PX ↔ REM ↔ EM ↔ PT Converter
Comments
No comments yet — be the first to write one!