CSS Unit Converter — px, rem, em, pt, mm, inches

Converter

Value

From

Root font size (px)

—

All converters

px → rem 29 pages rem = px ÷ root font size rem → px 31 pages px = rem × root font size px → em 11 pages em = px ÷ parent font size em → px 8 pages px = em × parent font size px → pt 15 pages pt = px × 72 ÷ 96 = px × 0.75 pt → px 18 pages px = pt × 96 ÷ 72 = pt × 1.3333… px → mm — mm = px × 25.4 ÷ 96 mm → px — px = mm × 96 ÷ 25.4 px → cm — cm = px × 2.54 ÷ 96 px → in — in = px ÷ 96 in → px — px = in × 96

CSS units reference

CSS length units and their fixed pixel relationships
Unit	Name	Type	In pixels	What it is
`px`	Pixel	absolute	1 px	The CSS reference pixel. Not a physical device pixel — on a 3× display one CSS px covers nine device pixels.
`rem`	Root em	relative	= root / parent font size	Relative to the root element's font size. The unit of choice for anything that should scale with the user's browser setting.
`em`	Em	relative	= root / parent font size	Relative to the font size of the current element, which makes it compound when nested.
`pt`	Point	absolute	1.33333 px	1/72 inch. The unit print and native macOS/iOS tooling speak.
`pc`	Pica	absolute	16 px	12 points, 1/6 inch. Typesetting heritage.
`in`	Inch	absolute	96 px	Fixed at exactly 96 CSS px.
`cm`	Centimetre	absolute	37.79528 px	1cm = 96/2.54 ≈ 37.795 px.
`mm`	Millimetre	absolute	3.77953 px	1mm = 96/25.4 ≈ 3.7795 px.
`Q`	Quarter-mm	absolute	0.94488 px	A quarter of a millimetre. Rare, but part of the spec.

Questions

Which CSS unit should I use?

rem for type, spacing and layout — it respects the user's browser font-size setting. px for hairlines and anything that must not scale. Avoid pt, mm and in on screen entirely; they are print units that CSS only supports for print stylesheets.

Why is 1 inch always 96 pixels in CSS?

Because the spec pins it there. It is a reference relationship, not a physical measurement — it lets absolute units stay self-consistent across wildly different displays. A CSS inch on a 460 PPI phone is nowhere near an inch of physical glass.

What is the difference between rem and em?

rem is always relative to the root element. em is relative to the current element's own font size, so nested elements compound: 0.9em inside 0.9em is 0.81 of the original. rem avoids that entirely, which is why it is the safer default.

Print & physical sizes

Converting for print is a different calculation — it depends on DPI, not on the CSS 96px inch. See print sizes in pixels and the DPI calculator.