📏 CSS Unit Converter
Convert between px, rem, em, pt, pc, in, cm, and mm with a custom root font size. All conversions update live.
Last updated: May 21, 2026 · By Λ
All units from your "From" value
Convert any CSS length unit to any other
CSS has more length units than most stylesheets ever use. Pixels are the default in browser DevTools, rem and em scale with font size, points and picas come from print typography, and inches, centimeters, and millimeters are physical units that browsers resolve to pixels using a fixed ratio. This tool converts between all of them in a single step. Enter a value on the left, pick a unit on the right, and read the result. The grid below shows every other unit at the same time, which is useful when you want to translate a designer's measurement into something a developer can paste into a stylesheet.
The conversion ratios follow the CSS Values and Units specification. 1 inch is 96 pixels, 1 point is 1.333 pixels, 1 pica is 16 pixels, and 1 centimeter is 37.795 pixels. Relative units (rem and em) depend on the root font size, which defaults to 16 pixels and can be changed in the box below the converter. The em unit is treated the same as rem here, since a standalone CSS value has no parent element to inherit from. If you need em values that take a specific parent size into account, set the root size to that parent's computed pixel value.
How to use this tool
- Type a number into the "From" box and pick its unit.
- Pick the target unit in the "To" box. The result updates as you type.
- Change the root font size if your project uses something other than 16px on html (some sites use 62.5% for 10px root math).
- Use the grid below the converter to see every other unit at once, and click any cell to set it as the new "From" value.
- Click the swap arrow between the two boxes to reverse the direction of conversion.
Frequently Asked Questions
Why is 1 inch always 96 pixels?
CSS uses a fixed "reference pixel" that is 1/96 of an inch on a 96 DPI display, by spec. Modern devices have much higher pixel densities, but CSS keeps the ratio fixed to give cross-device consistency. This is why physical units like cm and in are usually a bad idea for screen layouts: they do not equal an actual centimeter on most screens.
What is the difference between em and rem?
rem is relative to the root font size (the html element). em is relative to the font size of the current element. In a standalone converter, we treat them the same because there is no parent context. If you need a specific parent size, set the root size to that value.
Why might a project use a root font size other than 16px?
A common trick is to set html { font-size: 62.5% } which makes 1rem equal 10px. That lets you write rem values like 1.6rem instead of 1rem and reason in tens. The downside is that it interferes with user-defined font sizes for accessibility, so the practice is controversial.
When should I use rem vs px?
rem scales when users change their browser font size, which is good for accessibility. px is fixed, which is good for things like border widths and image sizes that should not scale. A reasonable default is rem for typography and spacing, px for borders and icons.