Why “Absolute” CSS Units Are Anything But

CSS units are traditionally split into two camps: relative and absolute. Relative units like %, em, rem, and viewport units derive their size from other style definitions or a parent container. Absolute units — most commonly the pixel (px), but also the centimeter (cm) and inch (in) — are supposed to be rooted in physical reality. In practice, none of them are, at least not on screen.

The Logical Life Of A CSS Pixel

Pixels have been the backbone of CSS since the web began. In the era before smartphones, a screen's physical pixels were one and the same as CSS pixels. A common desktop resolution in 2007 was 1024×768, and it was standard practice to give a page a fixed width of 1000 pixels, leaving the remainder for the browser scrollbar. That tidy equivalence disappeared when high-density screens arrived. On an iPhone 12 Pro, whose screen is 1170 physical pixels wide, every 3 device pixels count as 1 CSS pixel.

This introduces a critical distinction:

  • CSS pixels are logical pixels.
  • Device pixels are real physical pixels.

Desktop displays underwent the same shift. Retina-class screens arrived on laptops around 2014. On a 13.3-inch MacBook Pro, the screen is 2560 physical pixels wide but behaves like 1440 logical pixels, a ratio of roughly 1.778 physical per logical pixel. The 16-inch MacBook Pro has a 3072-pixel-wide panel that acts like 1792 logical pixels, a 1.714 ratio.

PC laptops show the pattern even more starkly. A 15.6-inch full-HD screen is 1920 physical pixels wide but behaves like 1536 logical pixels (1.25 ratio). A 15.6-inch 4K screen is 3840 physical pixels wide — yet also behaves like 1536 logical pixels, a 2.5 ratio. The link between physical and logical pixels has effectively vanished.

The reason is simple. Had we stuck with physical pixels as screens got denser, content would have become unreadably small. A Samsung Galaxy S21 Ultra in portrait mode is 1440 physical pixels wide — a number that fits within many desktop viewports. But rendering text at that physical size would shrink it below legibility. So we separate the two and use logical CSS pixels for layout, while still loading high-density images and videos at full physical resolution.

The Fiction Of The CSS Inch And Centimeter

If pixels are logical, then physical units like inches and centimeters must still be tied to reality, right? Not so. Testing a 1cm-square box with a real tape measure on a mid-2019 13-inch MacBook proves it immediately: a CSS centimeter is not equal to a physical centimeter. The same holds for in (in), and for derived units like pica (pc) and millimeter (mm).

The reason traces back to the 1980s. The PC market standardized on the CSS inch being equal to 96 pixels, matching the 96 DPI of Windows monitors at the time. Apple, meanwhile, used a different standard of 72 DPI. The decision was a poor one for the future: as screen density increased to 120 and 160 DPI, a CSS inch at a fixed 96 CSS pixels stopped corresponding to a real physical inch.

CSS centimeters are directly derived from inches. Since 1 inch equals 2.54 centimeters, 1 CSS centimeter is fixed at 37.7952756 CSS pixels (96px / 2.54). Neither unit represents what its name implies on a screen.

Points, PPI And DPI

The point (pt) unit is less well known, but it suffers from the same disconnect. In typography, a point is the smallest unit of measure for font size and leading on a printed page.

To understand why, it helps to distinguish the two density measurements:

  • PPI — pixels per inch, used for screens.
  • DPI — dots per inch, used for printers.

It's worth emphasizing that these counts apply to both width and height. A screen at 96 PPI renders a 1-inch square as 96×96, or 9216, total pixels. Manufacturers often label mobile and desktop displays as having a given DPI, but for screens the measurement is always PPI.

The CSS point unit derives from the 72 DPI printer standard set in the 1980s. Thus 1 CSS inch always equals 72 points, and 1 point is 1/72 of an inch. Since the web uses the 96 DPI standard for its own conversions, there is no reason to use points on the web. A CSS point isn't equal to a CSS pixel:

  • 1 point = 1.333 pixels
  • 72 points = 1 inch
  • 72 points = 96 pixels

Printers Are A Different Story

The situation for print output is remarkably different. A practical test on a laser printer — printing two boxes, one at 72 points and one at 1 inch — produced exactly 1 physical inch for both. At 100% zoom, printers honor the 1980s standard faithfully, which gives units like points, inches, and centimeters continued relevance in print CSS, even if results may vary across printer models. For the web, however, these are all relative units in disguise, ultimately anchored to a fictional 96-pixel CSS inch.

Physical Sizes Are Still Out Of Reach In CSS

Even on capable hardware, the browser's own measurement tools can mislead. A 16-inch MacBook Pro uses a ratio of 1.714 physical pixels per CSS pixel, yet JavaScript's window.devicePixelRatio returns 2. This discrepancy appears without even factoring in browser or operating-system zoom levels.

An illustration of a measuring tape
(Image credit: Shutterstock) (Large preview)

This gap matters because CSS pixels no longer describe real screen pixels on most smartphones and desktops. When you set a fixed width for a sidebar or a breakpoint for a layout, you are working with a unit that has drifted from its original physical meaning.

The consequence: web developers lack a genuine physical unit for CSS. A real centimeter or inch unit would give designers control over print-style measurements and consistent physical dimensions. Firefox experimented with an actual physical millimeter unit (mozmm) but removed it in version 59. The reasons are unclear, though the deep entanglement of CSS pixels with em, rem, and responsive image logic may have made a true physical unit more disruptive than useful.

The industry seems comfortable with this abstraction. Years of working in pixels have normalized a unit whose connection to device pixels is now largely ceremonial. If you doubt that comfort is misplaced, try explaining what a CSS pixel actually measures to someone new to front-end development.

For now, there is no reliable way to declare a physical size in CSS. The CSS pixel remains an absolute unit in name only — convenient, familiar, and detached from the physical world it claims to describe.

The Takeaway

The journey from CSS pixels to device pixels reveals the slippery foundation of web measurements. CSS inches and centimeters are simply conversions of CSS pixels, not connections to real-world units. The point unit follows the same pattern: an absolute unit with no fixed physical equivalent in the browser environment.

This leaves the web with units that behave like relatives pretending to be absolutes. CSS pixels work because everyone agrees to use them, not because they map to anything physical. That agreement is the only standard holding the system together.

The CSS pixel is the worst absolute unit — except for all the alternatives.