Absolute Units

Absolute units look simple: fixed sizes, no context needed. But they hide one important nuance. On screens, they don’t always match their physical counterparts. The whole system is anchored to a single equation:

1in = 96px

Every other absolute unit is defined relative to this anchor. So 1in, 2.54cm, 25.4mm, 72pt and 6pc all compute to exactly 96px on a screen, regardless of your monitor’s physical size.

px

Formula

1px = 1/96in

Relative to

Reference pixel

Support

Universal

The CSS pixel is the foundation of screen interfaces, but it is not a physical dot on your display.

CSS defines a reference pixel as the visual angle of one pixel on a 96 dpi device viewed from a distance of 28 inches (roughly arm’s length).That 28-inch arm is a real anthropometric estimate written into the spec: the pixel is defined as a unit of seeing, not of hardware. A useful mental model is that 96px behaves like one “logical inch”, but a logical inch is not a real-world inch: on most screens 96px won’t match a ruler (see the in section below).

On a standard 1× display, 1 CSS px = 1 device pixel. On a HiDPI display (Retina MacBook, iPhone, high-end Android) the ratio is 2 or more per axis: at 2×, a 1×1 px square is painted with two device pixels across and two down — four in total.Worth stating plainly, because “a CSS pixel is two device pixels” is the usual shorthand and it undercounts the area by half. The ratio is linear; the pixels are a grid.

That ratio is window.devicePixelRatio, and it is not a property of the screen alone. The spec defines it as the size of a CSS pixel at the current page zoom divided by the size of a device pixel — so zooming the page changes it on hardware that has not moved. Read it as “device pixels per CSS pixel right now”, not as “what kind of display is this”.

in

Formula

1in = 96px = 2.54cm

Relative to

CSS pixel (screen) / physical inch (print)

Support

Universal

The CSS inch. On screens, 1in is exactly 96px, which may or may not be a real inch on your physical monitor.

Hold a ruler to your screen and measure a 1in element. On most monitors, it won’t match. The CSS inch is calibrated for the reference pixel model, not your device’s physical dimensions.

cm

Formula

1cm = 96px ÷ 2.54 ≈ 37.795px

Relative to

CSS inch

Support

Universal

The CSS centimeter. Since 1in = 2.54cm, one CSS centimeter equals ≈ 37.795px. Like in, it maps to a real centimeter only in print contexts.

That print context is where cm earns its keep: @page { margin: 2cm } reads exactly like the paper document it produces, and anyone who has ever set margins in a word processor can review it without converting anything.

mm

Formula

1mm = 1cm ÷ 10 ≈ 3.78px

Relative to

CSS centimeter

Support

Universal

One tenth of a CSS centimeter, or ≈ 3.78px. Small enough to be useful for margins, gutters, and bleed areas in print layouts.

This is the unit the physical world is specced in: a European business card is 85mm × 55mm, a typical print bleed is 3mm. Write those numbers as they appear on the spec sheet and the CSS documents itself.

Q

Formula

1Q = 1mm ÷ 4 ≈ 0.945px

Relative to

CSS millimeter

Support

Universalall engines since Mar 2020

A quarter-millimeter — the smallest absolute unit in CSS. At 0.945px, it sits below one CSS pixel, so rendering depends on sub-pixel anti-aliasing and varies across browsers.

The Q unit originates from Japanese print typography, where the kyu (Q) is a traditional typesetting unit.級 (kyū) means “grade”; one kyū is exactly 0.25mm. The romanization made Q the only CSS length written with a capital letter — and the only one named in Japanese. It landed in the CSS spec to serve Japanese print workflows. It was the last absolute unit to become universal: Firefox shipped it in 2016, Chrome in 2017, and Safari only in 13.1 (March 2020). Internet Explorer never supported it, which matters only for archived stylesheets now.

pt

Formula

1pt = 1in ÷ 72 ≈ 1.333px

Relative to

CSS inch

Support

Universal

The typographic point: the traditional unit of print typography, inherited from physical typesetting. There are 72 points per inch, so 1pt ≈ 1.333px in CSS.

Points are familiar from print design tools: InDesign, Illustrator and Word all size type in pt. (Figma is the exception people expect to see here — it sizes text in pixels, and only converts to points on PDF export.) 12pt body text and 24pt headings are deeply ingrained print conventions.

pc

Formula

1pc = 12pt = 1in ÷ 6 = 16px

Relative to

CSS point and inch

Support

Universal

The pica, equal to 12 points. 1pc = 16px, which happens to equal the browser’s default body font size: a coincidence worth knowing.

Picas were used to measure columns, gutters, and large typographic elements in traditional print. In web CSS, they appear almost exclusively in print stylesheets or code from developers with a print background.

Conversion reference

All absolute units mapped to CSS pixels:

When to reach for absolute units

In modern web development, absolute units have a narrow role:

• px — the workhorse. Borders, shadows, icon sizes, anything that should stay constant regardless of font size or viewport.
• pt, cm, mm, in, pc, Q — mainly @media print and physical-output contexts. On screens they all resolve through the 1in = 96px anchor, so they’re pixel values with extra steps.
• Accessibility: here’s the precise distinction. Page zoom does scale px text (the whole page magnifies). What px ignores is the user’s default-font-size setting: someone who sets their browser default to 20px still sees your font-size: 16px as 16px. rem/em honor that preference, which is why they’re the safer default for type.

Sources

• CSS Values and Units Module Level 4 — absolute lengths
• CSS Values and Units Module Level 4 — reference pixel
• MDN — CSS length values
• CSSOM View — window.devicePixelRatio — the algorithm that makes it follow page zoom
• Smashing Magazine — There is no such thing as a CSS absolute unit — the same argument, at length