CSS Unit Converter

How to use

1. Set the root font size if your site does not use the browser default of 16px.
2. Type a value and read it in every unit at once, or switch to whole stylesheet.
3. Paste CSS, choose rem or em, and every pixel value above the threshold is rewritten.
4. Copy the result, or download it as a file.

Features

• Both relative units done properly: rem against the root font size, em and % against the parent's.
• Rewrites a whole stylesheet with a scanner, so px inside a comment, a string or a name such as --gap-2px is left alone.
• Keeps hairline values in pixels by default, because a 1px border converted to rem stops being one device pixel.
• Handles negative and decimal values, and stops at five decimal places rather than printing float noise.
• Every unit at once for a single value, each one ready to copy.

Frequently asked questions

Why convert pixels to rem at all?

Because a reader who sets a larger default font size in their browser gets nothing from a layout written in pixels — the text stays exactly as small as it was. Sizes in rem scale with that setting. It is the single cheapest accessibility improvement available in CSS.

Should I convert the values in my media queries?

It is genuinely contested. Breakpoints in rem respond to the reader's font size, which some designers want and others find unpredictable, and Safari has historically been inconsistent about em in media queries. This tool converts them like any other value; if you would rather it did not, raise the keep threshold above your breakpoints or convert those rules separately.

What is the difference between rem and em here?

rem is measured against the root font size and is the same everywhere in the document. em is measured against the font size of the element it is written on, so the same em value means different pixels in different places — which is why this tool asks for both sizes rather than assuming they match.

Is 1pt really 1.333px?

Yes, by definition rather than by measurement. CSS defines a pixel as 1/96 of an inch and a point as 1/72, so a point is exactly 4/3 of a CSS pixel regardless of the screen. This is a reference pixel, not a hardware one — on a high-density display several device pixels render each CSS pixel.

Related tools