Skip to main content
⇠ Blog

CSS pixels are a lie

Tech
Over the years, our screens have become more and more densely populated with pixels. Modern displays are often described as 2x or 3x meaning they have 4 or 9 times as many pixels as a traditional display of the same physical size.
As a result, if developers specify dimensions in their apps using pixels (px), everything would look too small on newer devices - and too big on old devices.
To counter this, operating systems often provide an abstraction of pixels. For example the point (pt). This way developers can specify the size of an element in a display-agnostic way. On an older device, 1 point might be 1 physical pixel - and on a newer device 1 point could be 36 physical pixels.
Image showing how areas specified in actual pixels and point vary between different display types:
How areas specified in actual pixels and points vary between devicesHow areas specified in actual pixels and points vary between devices

§CSS could have just rolled with the same system that operating systems provided, but too much existing web content already relied on the assumption that every device had 96 dots-per-inch (DPI). Developers were used to specifying things in pixels, or worse a mixture of pixels and other units. As a result, lots of existing websites were becoming horribly broken on modern devices.
So instead, CSS defined the pixel as 0.75 points. Doing this ensured that things remained the same relative size even if specified in a mixture of points and pixels or shown on higher DPI displays. The downside of this approach is that web developers are no longer able to control the size of something in actual device pixels, as they only have point-based abstractions available.
Image showing how areas specified in CSS pixels and point vary between different display types:
How areas specified in CSS pixels and points vary between devicesHow areas specified in CSS pixels and points vary between devices

§This table gives an idea of how values translate between CSS pixels, actual pixels and points.
Screen densityCSS pixelsActual pixelsPoint
1x 160 120 120
2x 160 240 120
3x 160 360 120
Most of my photos are licensed under Creative Commons BY-SA 3.0.
If you are unsure about your right to use them please contact me.