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?
When a pixel equals one hardware pixel, an objectís size is dramatically different across diverse screen resolutions, even for devices of the same type.
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 CSS Reference Pixel is based on a standard visual angle at a typical viewing distance regardless of hardware resolution, so a CSS pixel is bigger for screens viewed farther away.
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).
When a pixel equals one CSS pixel, an objectís size is more likely to appear consistent across diverse screen resolutions when corrected for typical viewing distances.
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.
When a display has a 2x scaling factor, that means one CSS pixel translates to two hardware pixels, or four hardware pixels in both dimensions.
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.
In software like Adobe Muse (top) or Adobe InDesign (bottom), you specify layout and object sizes for screen design in CSS pixels, even though the actual hardware pixel dimensions may be much higher.
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 size using a standard unit that is not tied to the hardware pixels of a specific output device, your measurements are translated into hardware pixels, and so the final output size of your objects is 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 a larger context we already know why the CSS Reference Pixel makes sense.
Inserted Article Image(s):
Article Slider image:
Liked This? Read These!
Compare PDFs Pixel by Pixel
Press releasePremedia Systems, Inc. is pleased to announce the release and immediate availability of PDF Comparator, an application that harnesses Mac OS Xís built in PDF rendering... Read More
Adobe Creative Suite 3 to Be Featured at Pixel and Vector Conferences
Barrycon Productions, an independent event organizer for Adobe products and producer of the Creative Suite and InDesign conferences, today announced that Adobe's new Creative Suite 3 will be featured... Read More
Photoshop How-To: Seeing the Big Pixel
This story is taken from "Design Graphics Photoshop Studio Skills."To buy this book click here. Read More
Pixel Outpost Opens Up a New World of 'Big Print' Options for Consumers
Pixel Outpost, a company with its roots in color management and digital print innovation, today announced the launch of a new Internet print service that focuses solely on large format prints.... Read More
Graphics Image Editing
Photo Image Editing
Web Design & Layout