CSS Unit Converter

How to use it

1. Set the root font size, which is the reference for rem, and the parent font size, which is the reference for em and percent.
2. Pick the unit of the numbers you paste, for example rem if the values come from a design token file.
3. Paste one value per line into the input box. Blank lines are ignored and lines that are not numbers are counted as skipped.
4. Read the table, where each row shows the same length in all five units.
5. Copy the table or download it as a plain text file.

Common use cases

• Design token migration - turn a column of px values into rem before pasting them into a stylesheet.
• Spacing audits - check that a spacing scale lines up across px and rem based units.
• Print styles - see the pt equivalent of screen sizes when you prepare a print stylesheet.
• Percentage sizing - work out what percent of the parent font size a given em value represents.

Why it stays private

The conversion is plain arithmetic on the numbers you type. There is no network request, no upload and no account, so the values never leave your browser.

FAQ

Q: Why does em differ from rem in the table? A: rem is always relative to the root font size, while em and percent are relative to the font size of the parent element. The tool asks for both reference sizes so you can model a real nesting situation.

Q: How is pt converted? A: The tool uses the CSS definition where 1pt equals 4/3 of a pixel, so 12pt is 16px. That is the ratio browsers apply at the standard 96dpi reference.

Q: Why did some lines disappear? A: Lines that cannot be parsed as a number are skipped and counted in the status line next to the buttons. Remove commas, unit words and other text so each line holds a single number.