Is a CSS pixel really an absolute unit? That is, is 1 inch = 96px true?

Question

The official W3C documentation says:

1 px = 1/96th of 1 in

In my previous 18.5 inch screen, the screen.width was 1367 px and the screen width in inches was 14 inches. By the W3C formula:

14 * 96 px = 1344 px

The W3C formula deviated by 20/14 px per inch. Since the deviation is too low, and 1 inch on my screen was 97.4 px I accepted the W3C formula, and believed that a CSS pixel is an absolute unit of measure, meaning it is always equal to 0.75 pt (a physical unit).

This week I bought a 21.5 inch, full HD screen, which has width 19 inches and screen.width is 1920 px. So now 1 inch on my screen is:

1920/19 ~ 101 px

Not only this, my friend's screen is 24 inches, and has the same 1920 x 1080 resolution. Both 24 inches and 21.5 inches cannot correspond to same amount of CSS pixels.

So now, on my screen, CSS pixels is not an absolute unit of measurement. And everything is relatively smaller on my screen. Even that, now I get deluded by my font sizes. When I find 16 px as minimum readable font on my screen, it is actually larger on smaller screens. Because 16 px on my screen is physically the same in centimeters as 14px in centimeters on my previous smaller screen. I am designing my websites wrong and I am not a good front end developer anymore.

So the question:

• Is a CSS pixel really an absolute unit? That is, is 1 inch = 96 px true?

Angrist

Unless you messed up somewhere, sounds like it's not. :) – Optometer

Answer 1

As specified slightly further down the part of the CSS Values and Units Module you've already linked, there are two different implementations that can be applied with CSS:

For a CSS device, these dimensions are anchored either

i. by relating the physical units to their physical measurements, or
ii. by relating the pixel unit to the reference pixel.

This goes on to note:

If the anchor unit is the pixel unit, the physical units might not match their physical measurements. Alternatively if the anchor unit is a physical unit, the pixel unit might not map to a whole number of device pixels.

And finally, it concludes:

The reference pixel is the visual angle of one pixel on a device with a pixel density of 96dpi and a distance from the reader of an arm’s length. For a nominal arm’s length of 28 inches, the visual angle is therefore about 0.0213 degrees. For reading at arm’s length, 1px thus corresponds to about 0.26 mm (1/96 inch).

This means that the pixel unit is an absolute length, but its length can change depending on whether the device applies implementation i or implementation ii from the first part I've quoted here.

An absolute length, as defined by the CSS Values and Units Module, is simply a length which is “anchored to some physical measurement”. The physical measurement will either be their actual physical length or the length derived by the reference pixel.

The same section of the specificaiton also says:

For print media and similar high-resolution devices, the anchor unit should be one of the standard physical units (inches, centimeters, etc). For lower-resolution devices, and devices with unusual viewing distances, it is recommended instead that the anchor unit be the pixel unit. For such devices it is recommended that the pixel unit refer to the whole number of device pixels that best approximates the reference pixel.

96px will not always equal 1 real-life inch.

Aixlachapelle

Things seem to be more complicated. If I give width: 1cm then developer tools show computed width 62px. now I suppose width: 2cm should be exactly double but it comes out to be 99px. Comparing with actual scale also showed that 2cm is not double of 1cm. So I suppose ii is implemented but if it were then 1px should be 1/96 in which is not. – Angrist

Secondly. I assume 1inch is 96 reference px if ii is implemented. But what if my screen dpi is more than 96? Say I have 200dpi screen then what would 1 reference px correspond to in inches? – Angrist

Lastly, I think screens implement none of i and ii. Screens just try to match the standard css pixel width like a large desktop would be 1920px a medium desktop would be 1366px and Laptops would be around 1280(may be macbook is 1440px). Old crt monitors were 800px. This is more evident by the fact that in windows 10 I can choose between 1920, 1680, 1600,1440, 1400, 1366, 1360, 1280, 1152, 1024 and 800. Where 1280 has more options with different heights for different aspect ratios. – Angrist

Answer 2

A Css pixel unit is not necessarily a physical pixel measurement,(in my answer i am addressing css px for screens and not print)

For a CSS device, these dimensions are either anchored (i) by relating the physical units to their physical measurements, or (ii) by relating the pixel unit to the reference pixel.

In the above explanation the reference pixel is explained as follows

The reference pixel is the visual angle of one pixel on a device with a pixel density of 96dpi and a distance from the reader of an arm's length. For a nominal arm's length of 28 inches, the visual angle is therefore about 0.0213 degrees. For reading at arm's length, 1px thus corresponds to about 0.26 mm (1/96 inch).

more explanation is here

For a simple example lets take an iPhone 8

Phy px 750 X 1334

CSS px 375 X 667

As you can see physical px measurements is completely different from Css px. Ratio between actual physical pixel and css pixel is called pixel ratio, which is determined based on viewing angle, distance it is viewed from and display resolution.

At the end of the day hardware vendor has this set depending on the above mentioned aspects.

Here is the link to the list of devices with phy px , css px and their pixel ratio.

The objective for all of this is to have a more consistent display through out different hardware.

And finally as documentation from w3.org points out:

Note that this definition of the pixel unit and the physical units differs from previous versions of CSS. In particular, in previous versions of CSS the pixel unit and the physical units were not related by a fixed ratio: the physical units were always tied to their physical measurements while the pixel unit would vary to most closely match the reference pixel. (This change was made because too much existing content relies on the assumption of 96dpi, and breaking that assumption breaks the content.)

In earlier versions Css pixel was heavily based on reference pixel which was based under the assumption its always 96dpi.Here instead css px and phy px are related by pixel ratio.

Hope this helps.

Federal

Answer 3

No, px is a relative unit. As pixel size is different for different screen sizes they (maybe W3C) set a standard for px as a relative unit.

Karankaras

By px, do you mean physical pixel or logical pixel? And can you mention some references to back up your claim? – Angrist

If by px you mean css pixel then do you any reference or proof for "As pixel[css pixel] size is different for different screen sizes". – Angrist

Check out this link w3.org/Style/Examples/007/units.en.html – Karankaras

In your link there are two importnat points. 1. The px is thus not defined as a constant length, but as something that depends on the type of device 2. In fact, CSS requires that 1px must be exactly 1/96th of an inch in all printed output I think printed output excludes screens. So as far this reference goes your claim is right. But the reference is not official css documentation So I cannot accept your answer. Also they don't explain how px is related to dpi of the screen that is how much 96px on my screen(dpi 102) is in inches?. – Angrist

@Angrist Printed output is a tricky phrase, because each printer has its own print resolution (DPI). 100px / 100px on a 300 DPI printer will be smaller than a 100px / 100px on a 96 DPI printer. – Seamount

Generally speaking, a pixel cannot be an absolute size (measured in real life) due to resolution differences in monitors and printers. Never assume that 1000px will have a fixed set real-life width on monitors or print. – Seamount