CSS: What's a CSS Pixel? What's Reference Pixel?

By Xah Lee. Date: . Last updated: .

How Big is a Pixel? What's Reference Pixel?

CSS spec allows 2 interpretations of CSS px unit.

  1. A pixel is 1/96 of a inch (0.2645 mm). (for web designers, think of this as designing for 96 DPI desktop monitor.)
  2. As a “reference pixel”. A “reference pixel” is a visual angle of 0.0213 degrees.
css reference pixel
CSS Reference Pixel

A reference pixel's length depends on the device's designed viewing distance from screen. (think of pocket phone to big TV screen.)

One way to think of a pixel is 1/16 of a default font size, regardless the device's screen size.

Here is what spec says. Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification. Syntax and basic data types#length-units. Quote:

Absolute length units are fixed in relation to each other. They are mainly useful when the output environment is known. The absolute units consist of the physical units (in, cm, mm, pt, pc) and the px unit:

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. 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.

Note that 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.

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.)

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).

[see CSS: Units]

Here is a bunch of articles addressing issues related to screen density.

JavaScript in Depth

User Interface Design