CSS: What's a CSS Pixel? What's Reference Pixel?
How Big is a Pixel? What's Reference Pixel?
CSS spec allows 2 interpretations of CSS
- A pixel is 1/96 of a inch (0.2645 mm). (for web designers, think of this as designing for 96 DPI desktop monitor.)
- As a “reference pixel”. A “reference pixel” is a visual angle of 0.0213 degrees.
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's 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:
- in: inches — 1in is equal to 2.54cm.
- cm: centimeters
- mm: millimeters
- pt: points — the points used by CSS are equal to 1/72nd of 1in.
- pc: picas — 1pc is equal to 12pt.
- px: pixel units — 1px is equal to 0.75pt.
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]
- Around 1998, web design assumes 640×480.
- Around 2005, web design assumes 800×600.
- Around 2012, web design assumes 1024×800.
- Web Design, Minimal Window Width
- Phone and Tablet Screen Density Comparison
- Screen Size Comparison: DVD, iPhone, iPad, MacBook, Blu-ray
Here's a bunch of articles addressing issues related to screen density.
- Media Queries By W3C. At www.w3.org
- About those vector icons By Kirill Grouchnikov. At http://www.pushing-pixels.org/2011/11/04/about-those-vector-icons.html
- Optimising for High Pixel Density Displays By Edward Cant. At menacingcloud.com
- A pixel is not a pixel is not a pixel By Peter-Paul Koch. At http://www.quirksmode.org/blog/archives/2010/04/a_pixel_is_not.html
Ask me question on patreon