How to use the css unit converter
- Enter the size you want to convert and choose its unit.
- Set the root font size (what 1 rem equals) and the parent font size (what 1 em and 100% equal). Both start at 16 px.
- Choose which unit to show first. The results list every unit at once.
- Copy the result, or print or share it with the share link.
Formula
1 in = 96 px = 72 pt = 6 pc = 2.54 cm = 25.4 mm
pixels = size x 1 (px), x root (rem), x parent (em), x 96 / 72 (pt), x 16 (pc), x 96 (in), x 96 / 2.54 (cm), x 96 / 25.4 (mm), x parent / 100 (%)
size in a unit = pixels / (pixels per that unit)
The inch based units are fixed by the CSS specification. rem and em depend on the font sizes you enter. Results are rounded half up to four decimals.
24 px at a 16 px base
With a root and parent size of 16 px, 24 px is 24 / 16 = 1.5 rem and 1.5 em. In points it is 24 x 72 / 96 = 18 pt, in picas it is 24 / 16 = 1.5 pc, in inches it is 24 / 96 = 0.25 in, and in centimeters it is 0.25 x 2.54 = 0.635 cm.
If the parent font size is 20 px instead, 150% is 1.5 x 20 = 30 px, which is 1.875 rem at a 16 px root. That is why the two base sizes are separate fields.
rem, em and percent are relative
rem is relative to the font size of the root element, so it is the same everywhere on the page. em is relative to the font size of the element's parent when used for font-size, so nested elements can compound. A percent used for font-size works like em. Because these depend on the page, the tool asks for the sizes instead of assuming them.
Many browsers use 16 px as their default text size, but a page can change the root size and a visitor can change it in their browser settings. Using rem for text sizes lets the page follow that choice, which is why many style guides prefer it over px.
Absolute units on screens
Units such as pt, pc, in, cm and mm are defined in CSS as fixed fractions of 96 px per inch. On a screen an inch written in CSS is not guaranteed to measure an inch with a ruler, because screens differ in pixel density and scaling. They are exact as CSS units, not as physical lengths.
For fluid sizes that scale between two screen widths see the CSS clamp generator. For general lengths use the unit converter, and to tidy a stylesheet use the CSS formatter.
Assumptions and limits
- The inch based ratios are the ones the CSS specification defines: 96 px per inch, 72 pt per inch and 6 pc per inch.
- rem uses the root font size you enter and em and percent use the parent font size you enter.
- Percent means a percent of the parent font size, as used for font-size.
- Results are arithmetic on paper and do not model nesting beyond the two sizes you give.
Frequently asked questions
How do I convert px to rem?
Divide the pixel size by the root font size. At the usual 16 px base, 24 px divided by 16 is 1.5 rem. Change the base field if your page sets a different root size.
What is the difference between rem and em?
rem looks at the root element, so it is the same everywhere. em looks at the parent element, so it can grow or shrink as elements nest.
How many points is 16 px?
16 x 72 / 96 = 12 pt, because CSS defines 96 px as the same as 72 pt. The tool shows the point value for any pixel size you enter.
Why can the cm result differ from a ruler?
CSS defines 96 px as one inch, but real screens vary in pixel density and zoom, so a centimeter in CSS only matches a physical centimeter by chance. In print it is exact.