CSS Unit Converter
This CSS unit converter shows a value in every length unit at once, rather than one pairing at a time. The absolute units have fixed ratios defined by the specification — one CSS inch is exactly 96 pixels regardless of your actual display — so a CSS inch is a unit of layout rather than a physical measurement, which surprises people the first time they print something. The relative units depend on context, which is why the root and parent font sizes are both settable: rem is relative to the root font size and em to the parent element, and confusing the two is the most common cause of text that comes out unexpectedly large or tiny.
How it works
Converts between every CSS length unit at once. The absolute units have fixed ratios defined by the specification — 1in is exactly 96px regardless of your actual screen — so a CSS inch is a unit of layout rather than a physical measurement.
The relative units depend on context, which is why the root and parent font sizes are settable. rem is relative to the root font size and em to the parent, and getting those two confused is the most common cause of unexpectedly large or tiny text.
Everything runs in your browser — nothing you enter is sent to a server.
The fixed ratios
| Unit | In pixels |
|---|---|
| 1in | 96px |
| 1cm | 37.8px |
| 1mm | 3.78px |
| 1pt | 1.333px |
| 1pc | 16px |
These never change. A CSS pixel is a unit of the coordinate system, not of your display's hardware — which is why a "1in" box is not an inch wide when you hold a ruler to the screen.
rem versus em, concretely
With a 16px root, 1.5rem is 24px anywhere in the document. 1.5em is 1.5 times whatever
the parent is — so nested inside another 1.5em element it becomes 36px, and one level deeper 54px. That
compounding is occasionally what you want and usually not.
Why rem for font sizes
A user who sets a larger default font size in their browser is telling you they need larger text. A size in
px ignores that entirely; a size in rem scales with it. It is a small change with a real
effect on people who need it.
Frequently asked questions
How do I convert px to rem?
Enter the pixel value and every other unit is shown, rem included. The conversion depends on the root font size, which defaults to the browser standard of 16px.
What is the difference between rem and em?
rem is relative to the root font size and is the same everywhere. em is relative to the parent element font size, so it compounds when nested — three levels of 1.5em is 3.375 times the base, which is rarely intended.
Why is 1in equal to 96px?
CSS defines it that way. The absolute units are fixed ratios to the pixel rather than measurements of the physical screen, so a CSS inch is only a real inch when printing.
Which unit should I use for font sizes?
rem, in most cases. It respects the user browser font size setting, which px ignores — an accessibility difference that matters to real people.
What is percent relative to?
For font-size, the parent font size. For width and height, the containing block dimension — which this tool cannot know, so the percentage shown here is the font-size interpretation.
Is anything uploaded?
No. The conversion is arithmetic done in your browser.
Related tools
CSS Formatter & Beautifier
This CSS formatter puts one declaration per line and normalises spacing without rewriting your values.
Unit Converter
Convert between units of length, weight, temperature, area, volume, speed, time, data storage, pressure and energy instantly.
CSS Validator
This CSS validator finds unbalanced braces, missing colons and unclosed comments by line.