The Pixel Lie: Why CSS Pixels Are Not Screen Pixels

Two Meanings of Pixel

The word "pixel" has two distinct meanings in modern web development, and confusing them leads to real design problems:

• Physical pixel (device pixel): An actual dot of light on the display panel. An iPhone 15 has 2,556 × 1,179 physical pixels. A 4K monitor has 3,840 × 2,160 physical pixels.
• CSS pixel (reference pixel): A virtual unit defined by the W3C CSS specification, intended to represent approximately 1/96th of an inch at a comfortable viewing distance. This is the pixel you write in CSS.

The relationship between CSS pixels and physical pixels is determined by the device pixel ratio (DPR). On a display with DPR=2 (a "2x" or "Retina" display), one CSS pixel corresponds to 2×2 = 4 physical pixels. On a DPR=3 display (common on high-end Android phones), one CSS pixel corresponds to 3×3 = 9 physical pixels.

The Reference Pixel: W3C's Definition

The W3C CSS specification defines the CSS pixel as a "reference pixel" — specifically, the visual angle of one pixel on a device with a pixel density of 96 dpi at arm's length (approximately 28 inches). This produces a pixel size of approximately 0.265 mm or 1/96 inch.

The 96 dpi standard came from Windows 95/98, which used 96 dpi as its standard display density, calibrated for the monitors of that era (typically 14–15 inch CRT monitors with 640×480 or 800×600 pixel counts, usually operated at about 28 inches viewing distance). When CSS1 defined the px unit in 1996, it was essentially defining it to match the then-standard Windows display.

The specification says that for low-density displays (below 200 dpi), 1 CSS px = 1 device pixel. For high-density displays, the browser uses a device pixel ratio to scale appropriately. The result: CSS pixels are an abstraction layer over physical pixels, designed to produce consistent visual size across different display densities.

The iPhone That Changed Everything (2010)

The concept of device pixel ratio became critical in 2010 when Apple introduced the iPhone 4 with its Retina display — a screen with 326 pixels per inch, exactly double the previous iPhone's 163 ppi. Apple designed the Retina display to have exactly twice the physical pixels in each dimension (960×640 instead of 480×320).

To maintain backward compatibility with existing websites — which specified pixel sizes in CSS and expected them to map to device pixels — Apple defined a device pixel ratio of 2. The iPhone 4's browser reported a screen width of 320 CSS pixels (the same as the iPhone 3GS) despite having 640 physical pixels. Every CSS pixel rendered as a 2×2 block of physical pixels, making text and images appear sharper without breaking any existing CSS.

This was a brilliant compatibility solution: existing websites worked, and the Retina display's extra pixels were used to render higher-quality text and graphics. But it established a permanent architectural division between CSS pixels and physical pixels that every web developer working with high-density displays must understand.

Device Pixel Ratios in the Wild

The Viewport Meta Tag

Another layer of complication: early mobile browsers handled the pixel mismatch by zooming out. Mobile Safari on the original iPhone would render a desktop website at 980 CSS pixels wide (a typical desktop layout width) and scale it to fit the 320px CSS screen, making everything tiny. Users were expected to pinch-zoom to read content.

The <meta name="viewport" content="width=device-width, initial-scale=1"> tag was introduced to address this. It instructs the browser to set the viewport width to the device's CSS width (rather than a simulated desktop width) and not to zoom. Without this tag, responsive designs behave unpredictably on mobile — the browser may apply its own scaling on top of the DPR scaling.

Why This Matters for px and rem

Understanding the CSS pixel lie is directly relevant to the px vs. rem debate:

When you write font-size: 16px, you are specifying 16 CSS pixels — which will appear as 32 physical pixels on a DPR=2 display, or 48 physical pixels on a DPR=3 display. The browser handles the DPR scaling automatically; your CSS works consistently across display densities.

When you write font-size: 1rem, you are specifying a size relative to the root element's font size (typically 16px by browser default). This means the actual CSS pixel size depends on the user's font preferences — if they have increased their browser's default font size to 20px, 1rem = 20px for them. This user-controlled scaling is the primary accessibility advantage of rem over px.

Neither px nor rem are physical screen measurements — they are both abstractions. But rem adds a second layer of abstraction (relative to user preference) that px lacks. That additional layer is what makes rem preferable for accessible typography.

Convert px to rem →