Skip to content
TextArray
100% local

CSS unit converter

Convert CSS lengths between px, rem, em, pt and % against any root font size.

Input
Output
Related tools
Aspect ratio calculatorDeveloper tools
Color converterDeveloper tools
CSS minifierDeveloper tools
CSS unit converter
Paste CSS values one per line — 16px, 1.5rem, 12pt, 150% — and this converter translates them instantly. A bare number is read in the unit set by the From select, while a unit written in the line always wins, so you can mix pixels and rems in one list. Pick a target under To, or choose All units to see the whole chain at a glance: 16px = 1rem = 12pt = 100%. Lines that are not plain values pass through unchanged, so a stray comment never breaks the run.
The math hangs off one number: the base size, the root font size in pixels. Browsers default to 16px, which is why 1rem usually equals 16px and 100% equals the base. Set the base to 10 for the classic 62.5% trick where 1.5rem is 15px, or match a design system with a different root. Points are fixed by CSS itself — 1px is 1/96 of an inch and 1pt is 1/72, so 16px is exactly 12pt regardless of the base. The decimals option caps precision at up to six places, with trailing zeros trimmed.
Rem is the accessibility-friendly unit: it scales with the reader's browser font-size preference, so text set in rem grows when someone raises their default size, while px stays fixed. Em uses the same math here, but in a real stylesheet it is relative to the element's own font size, so nested em values compound where rem does not — this converter assumes the flat, root-relative case.
Everything runs locally in your browser — nothing is uploaded and there is nothing to wait for. Copy the converted list or download it as a .txt file.
FAQ
Why use rem instead of px?
Rem values scale with the font size the reader sets in their browser, so people who need larger text actually get it. Px values ignore that preference. Converting a px-based design to rem is one of the cheapest accessibility wins there is.
What is the base size and why does it default to 16?
It is the root font size in pixels — what 1rem, 1em and 100% refer to. Every major browser ships with a 16px default, so 16 is the right base unless your stylesheet changes the root, for example html { font-size: 62.5% } which makes the base 10.
What is the difference between em and rem?
Rem is always relative to the root font size; em is relative to the current element, so nested em values multiply. This converter treats both against the single base size — the flat case. In deeply nested markup, real em values can differ.
What happens to lines that are not values?
They pass through to the output unchanged and the tally counts them as skipped. Only plain values like 16px, 1.5rem or a bare number are converted — full CSS declarations are out of scope.
Is my text uploaded anywhere?
No. The tool runs entirely in your browser and your input never leaves your device.