Rethinking the Pixel: It’s All Relative Now
How big is a pixel? It’s widely thought that a pixel is the smallest dot that screen hardware can physically display: One pixel is one pixel. That was safe to assume for over a quarter century because the pixel density of most of our screens was stuck between 72 and 120 pixels per inch (ppi) during that era, even while everything else about our computers got exponentially faster and bigger. But screens would finally make their move, and for designers that would change how a pixel is defined.
The Catalyst: The Retina display
In 2010 Apple introduced the iPhone 4 smartphone with a 326 ppi screen. Apple called their high-resolution screen the Retina display, and they later added a 220 ppi Retina display to their MacBook Pro line of laptops. Other companies released more devices at similarly high resolutions, referred to as HiDPI. This created a problem: Measuring screen objects using hardware pixels wasn’t going to work anymore, because you could no longer assume that a 100-pixel line was going to be roughly the same length on most screens. It was now possible for a 100-pixel line to be over an inch long on one device’s screen and less than 1/3 of an inch on another. As resolution goes up, objects become tiny. Was there a way to measure consistently without complicating the design process?
The Solution: The CSS Reference Pixel
Back in the 1990s, the World Wide Web Consortium (W3C) knew about the flaws in using a hardware pixel as a unit of measure and had a solution in the standard for Cascading Style Sheets (CSS), the language used to build web pages today along with HTML. Their solution defines the pixel in a way that many people are not aware of even today. In CSS, a pixel isn’t based on hardware pixels at all. Instead, a CSS pixel is a relative unit of measure, not absolute.
If a CSS pixel isn’t based on hardware and it’s relative, then what is it relative to? It’s relative to you. More specifically, the size of a CSS pixel is relative to both the viewer’s eye and the viewing distance to the screen.
What’s called the CSS Reference Pixel is actually an angular measurement. If that doesn’t make sense, here’s an analogy. If you see a full moon and you hold up a quarter you can block the entire moon, even though the moon is millions of times larger than a quarter. Of course, that’s because the quarter is millions of times closer to your eye. As you move the quarter closer to your eye, it takes up a larger angle of view in your field of vision until the quarter equals the angle of view that the moon takes up.
The CSS Reference Pixel uses angle of view in a similar way. It assumes a device with a pixel density of 96 ppi, held at arm’s length which is assumed to be 28 inches. The visual angle of a pixel at that distance turns out to be about 0.22 degrees, and that angle is the basis for working out the size of the CSS Reference Pixel on any size screen. For screens held closer to the eye, the visual angle is smaller so the CSS Reference Pixel is also smaller. For screens viewed farther, like a television or projection screen, the visual angle is much larger so the CSS Reference Pixel might be several millimeters wide.
The beauty of this is that when your unit of measure is the CSS Reference Pixel instead of a hardware pixel, the size of an object like the box in the earlier example remains relatively constant across screens of different resolutions, as long as the screen is roughly at the viewing distance that’s assumed for it. Android has a concept that’s similar to the CSS pixel, called the Device Independent Pixel (DIP).
While the concept of the CSS pixel has been around for a long time, few paid attention to it during the era when CSS pixels and hardware pixels were close in size. The distinction only became important after Retina-class displays made hardware pixels much smaller than CSS pixels.
As Usual, the Devil is in the Details
If you have measurements in CSS pixels, those still need to be translated into the actual hardware pixels of a particular screen. At Retina pixel densities, a CSS pixel can be as large as several hardware pixels. Those discrepancies were resolved using a scaling factor. For example an iPhone (non-Plus) Retina Display has a scaling factor of 2, because at its viewing distance, the width of the CSS pixel equals roughly two hardware pixels. When you take both height and width into account, a CSS pixel on a 2x Retina display contains four hardware pixels.
It’s easy to scale text and vector graphics because they render perfectly sharp at any resolution, like when you scale type and paths in Adobe Illustrator. But the scaling factor has a different effect on photos and other pixel-based images. An image optimized for 96 hardware pixels per inch won’t look right on devices where the hardware pixels are significantly smaller than the CSS pixel. If that image is scaled up to match the high resolution layout it will look blurry, but if it isn’t scaled up it will be tiny. To handle this, Web developers can write code that detects a device’s scaling factor so that a web site can serve up an alternate set of high resolution images that takes full advantage of the screen resolution.
But because images for high-resolution screens have to use every hardware pixel to show full detail, when you use a photo editor such as Adobe Photoshop to prepare images for high-resolution screens you’ll want to measure those in hardware pixels. If you have a CSS layer that’s 200 CSS pixels wide on a 2x Retina display and it contains an image, for that image to show full detail it needs to be 400 pixels wide (2x 200 pixels).
It gets even more complicated than that but fortunately, as a designer a lot of this is handled behind the scenes for you. When you use software to design layouts for web sites or screen-based content you can and should continue to use 96 ppi pixels as your unit of measure. Your web developers or design software should add the code that adapts the layout, vector objects, and type in your design to the scale factors of different screen sizes and resolutions. But if you’re preparing images for specific high-resolution screens you’ll have to keep the scale factor in mind. Also note that when you use image editing software such as Adobe Photoshop, they typically don’t support CSS pixels and scale factors so you should consider their pixel units to be hardware pixels.
Back to the Future
For a while it seemed like the high resolutions of print were fading out as design became dominated by the 96 ppi world of pre-Retina screen design. But now you might say that screen-based design has come back around to the resolution mindset of print: You specify object sizes using a standard unit that is not tied to the hardware pixels of a specific output device, then at output time your measurements are translated into hardware pixels, which makes the viewing size of your objects visually consistent whether the output device is 96 ppi, 300 ppi, or 2400 ppi. So while at first it might be surprising to learn that a CSS pixel is not based on a hardware pixel, in the more traditional context of print we already know why the CSS Reference Pixel makes sense.