CSS absolute length units, anchored to 1in = 96px

The CSS Values and Units Module fixes every absolute length to one equality: 1in = 96px = 72pt = 6pc = 2.54cm = 25.4mm = 101.6Q. Everything else follows: 1cm is 37.795276px, 1mm is 3.779528px and 1px is 0.264583mm. These are exact ratios in the layout engine, not measurements of your screen, which is the part that surprises people.

Pixels per inch: 96pxPoints per inch: 72pt1cm in pixels: 37.795276px1px in millimetres: 0.264583mm16px in points: 12pt

The CSS absolute length units

The definition column is quoted from the CSS Values and Units Module Level 4, which fixes the whole set to a single anchor: 1in = 96px = 72pt = 6pc = 2.54cm = 25.4mm = 101.6Q. The pixel and millimetre columns are calculated from that anchor, not measured, which is exactly how a browser treats them.

UnitAs the spec defines itPer inchIn pixelsIn millimetres
Pixel (px)1px = 1/96th of 1in9610.264583
Point (pt)1pt = 1/72nd of 1in721.3333330.352778
Pica (pc)1pc = 1/6th of 1in = 12pt6164.233333
Inch (in)1in = 2.54cm = 96px19625.4
Centimetre (cm)1cm = 1/2.54th of 1in2.5437.79527610
Millimetre (mm)1mm = 1/10th of 1cm25.43.7795281
Quarter-millimetre (Q)1Q = 1/40th of 1cm101.60.9448820.25

Reuse this data

Published under the Creative Commons Attribution 4.0 International (CC BY 4.0) licence. Copy it, adapt it, republish it, commercial use included, as long as you credit UnitGlide, https://unitglide.net and link back to this page. No permission request and no fee.

The unit definitions are quoted from a W3C specification and remain subject to the W3C document licence. The calculated columns and the arrangement here are ours and are offered under the licence above.

Copy this

<iframe src="https://unitglide.net/embed/reference/css-absolute-units"
        width="100%" height="460" loading="lazy"
        style="border:1px solid #e2e6ec;border-radius:12px"
        title="CSS absolute length units, anchored to 1in = 96px"></iframe>
<p><a href="https://unitglide.net/reference/css-absolute-units">CSS absolute length units, anchored to 1in = 96px</a> by UnitGlide, CC BY 4.0</p>

Result

The frame is served from this site, so it keeps the attribution link attached and picks up any correction automatically. If you would rather hold the numbers yourself, the whole table is on this page under the same licence.

The CSS pixel is a unit, not a device pixel

The px in a stylesheet is an absolute unit fixed at 1/96 of an inch. It is not one dot on the panel in front of you. On a phone with a device pixel ratio of 3, one CSS pixel covers nine device pixels, and the layout is unaffected, because the browser resolves everything against the anchor above and only then rasterises.

The specification anchors the pixel to a reference pixel, the visual angle of one dot at 96 dots per inch at arm's length, roughly 28 inches. That is why the unit survives contact with screens of wildly different densities: it describes an apparent size rather than a hardware count.

Because px is the canonical absolute unit, every other absolute unit in CSS is defined through it. Writing 1cm in a stylesheet is not a request for a centimetre on the glass; it computes to 37.795276px and lands wherever that falls on the display.

Why this matters for print stylesheets

On paper the physical units mean what they say, and that is where the table earns its keep. A print stylesheet asking for a 21.0cm wide block is asking for the full width of an A4 sheet, and the same rule turns 12pt body text into 4.2333mm of physical height.

The point is the unit typographers already think in, and CSS keeps it consistent: 72pt to the inch means 16px is exactly 12pt and 12pt is exactly 16px. That 1.3333 ratio between px and pt is worth memorising; it converts most body-text sizes in your head.

The Q unit exists for a narrower reason. Japanese typography sizes type in quarter-millimetres, so CSS provides the unit directly rather than making authors write fractional millimetres. One Q is a quarter of a millimetre exactly, and nothing else in the table has that heritage.

When to reach for a relative unit instead

Absolute units ignore user preference. Type set in px or pt does not respond when someone raises their default font size, which is a real accessibility failure and not a stylistic preference. For anything a reader might need larger, use rem or em, which scale with the root font size.

The common default root size is 16px, which is where the familiar 1rem equals 16px shorthand comes from, but it is a default rather than a rule. A user or a site can change it, and any conversion you have hardcoded against it silently stops being true.

The reasonable split is to use rem for type and spacing that should scale, and absolute units for things anchored to physical output: print layouts, borders that should stay hairline, and assets sized to real-world dimensions.

Frequently asked questions

How many pixels is 1 inch in CSS?

Exactly 96 CSS pixels. The CSS Values and Units Module fixes 1in = 96px as a definition, so it holds on every browser and every screen regardless of the display's actual dots per inch.

How many pixels is 1cm in CSS?

37.795276px, because 1in is 2.54cm and 96px, so one centimetre is 96 divided by 2.54. One millimetre is 3.779528px by the same route. Neither figure means a real centimetre appeared on your screen.

Is 1pt the same as 1px?

No. There are 72 points and 96 pixels to the inch, so 1pt is 1.3333px and 1px is 0.75pt. Body text at 16px is 12pt, which is why 12pt print copy and 16px screen copy look like the same size.

What is the Q unit in CSS?

A quarter of a millimetre: 1Q is 1/40th of a centimetre, so there are 101.6 of them to the inch and one Q is 0.944882px. It was added for Japanese typography, where type is traditionally sized in quarter-millimetres.

Why does 1cm in CSS not measure a centimetre on my screen?

Because CSS resolves cm through the fixed 96px per inch anchor rather than through your display's real pixel density. On a screen that is not exactly 96 dots per inch, a CSS centimetre is not a physical centimetre. On paper, where the browser knows the output size, it is.

Can I republish this table?

Yes, under Creative Commons Attribution 4.0 International (CC BY 4.0). Credit UnitGlide, https://unitglide.net and link back. The definitions are from the W3C specification, which carries its own permissive document licence; the calculated columns and the compilation are covered here.

Sources