The CSS pixel is not a pixel

CSS has an inch. It also has centimetres, millimetres, points and picas. What it does not have is any way to know how big your screen really is — and that contradiction is baked into the specification on purpose.

The anchor: 96 CSS pixels to the inch

The CSS specification fixes the relationship between absolute units:

1in = 96px = 2.54cm = 25.4mm = 72pt = 6pc

This is a definition, not a measurement. Write width: 1in and a browser renders 96 CSS pixels, whether the display is a 92 PPI office monitor or a 460 PPI phone. On the phone the box will be less than half a physical inch wide.

Where the reference pixel comes from

The specification defines the reference pixel as the visual angle of one pixel on a 96 PPI device held at arm’s length — about 28 inches. It is an angular unit dressed up as a length. That is why a CSS pixel on a phone held 30 cm away and a CSS pixel on a television across the room are supposed to look the same size even though they are physically very different.

Device pixel ratio does not rescue you

window.devicePixelRatio reports how many device pixels paint one CSS pixel — 2 on most retina laptops, 3 on many phones. It is set by the platform’s scaling policy, which is chosen for legibility rather than physical accuracy. Two 27-inch monitors of identical density can report different ratios if the user picks different scaling settings.

When physical units are safe

• Print stylesheets. In @media print, cm, mm and in map to real paper. Setting @page { margin: 2cm } does what it says.
• Generated PDFs. Same reasoning: the output medium has a defined physical size.
• Never for screen layout. Use rem, em, %, ch and viewport units, which respond to the user’s own text-size settings.

The practical takeaway

Treat 96 PPI as a conversion constant for CSS, and treat your monitor’s measured PPI as a separate fact about hardware. Our converter reports both: what a pixel value means at the CSS reference, and what it means at your display’s real density.