🎨 CSS Unit
CSS Unit Converter
Convert between CSS pixels, print units, physical measurements and root-relative typography units. Enter a value, choose units and press Convert.
About the CSS unit converter
CSS measures lengths with absolute units — px, pt, pc, in, cm, mm and Q — and with relative units such as em, rem, ex and ch. Every absolute conversion on this page is anchored to the CSS reference pixel defined as exactly 1/96 inch, so 1 in = 96 px, 1 pt = 96/72 = 1.3333 px and 1 pc = 16 px.
Relative units depend on context: rem is the root font size, em is the element's own font size, ex is roughly the x-height and ch is the width of the "0" glyph. This converter models a browser with the default 16 px root font size, which is what virtually every site uses when no font-size is set.
Absolute unit values
| Unit | Name | Equals |
|---|---|---|
| 1 px | CSS pixel | 1/96 in |
| 1 pt | Point | 1.333333 px = 1/72 in |
| 1 pc | Pica | 16 px = 1/6 in |
| 1 in | Inch | 96 px |
| 1 cm | Centimetre | 37.795276 px |
| 1 mm | Millimetre | 3.779528 px |
| 1 Q | Quarter millimetre | 0.944882 px |
| 1 rem | Root em (16 px root) | 16 px |
| 1 em | Element font size | 16 px at default |
| 1 ex | x-height | about 8 px |
| 1 ch | Width of "0" | about 8 px |
How to convert CSS units
Convert everything to pixels using the factors above, then divide by the target unit's factor. For example, 12 pt to rem: 12 × 1.333333 = 16 px, and 16 ÷ 16 = 1 rem. Going the other way, 2.5 rem to pt: 2.5 × 16 = 40 px, then 40 ÷ 1.333333 = 30 pt.
Worked examples
- 16 px = 1 rem = 12 pt = 1 pc = 0.166667 in
- 1 cm = 37.795276 px = 28.346457 pt
- 18 pt body text = 24 px = 1.5 rem
- A 210 mm A4 width = 793.7 px, which is why print stylesheets use 794 px as a starting canvas
Units that depend on their context
em is relative to the font size of the element's parent, which makes it compound: three nested elements each set to 0.9em end up at 0.729 of the original size, not 0.9. rem is relative to the root font size and does not compound, which is why it is the safer choice for spacing and type scales.
vw and vh are percentages of the viewport, but on mobile browsers vh historically included the space behind the collapsing address bar, so a full-height hero could end up taller than the visible screen. The newer svh, lvh and dvh units describe the small, large and dynamic viewport heights and solve that specific problem.
Other context-dependent units are easy to forget. % resolves against the containing block for width and against the parent font size for text; ch is the width of the "0" glyph in the current font, useful for line lengths; ex is the x-height; and container query units such as cqw resolve against the nearest container rather than the viewport. Two identical-looking declarations can therefore produce different results in different places on the same page, which is why the computed value in developer tools beats reasoning from the source.
Frequently asked questions
Common mistakes to avoid
- Treating pt as a screen unit. Points are a print measure; keep them for print stylesheets.
- Assuming ex or ch are exactly half the font size. They depend on the font's real x-height and digit width.
- Nesting em values carelessly — each level multiplies against its parent, so text and spacing can shrink or grow far more than expected.
- Setting a fixed px font size on the root element, which overrides the reader's own text-size preference.
Sources and standards
CSS lengths mix absolute units such as px and pt with relative units such as em, rem and vh. The W3C CSS Values specification fixes the absolute ratios, 1 in = 96 px and 1 pt = 4/3 px, while relative units depend on the element or the viewport.