When is a pixel not a pixel? pixels, points, dps
I’ve been confused in the past why in web UX design, we set the art-boards to a pixel size that is significantly different than the actual number of pixels on the device’ screen resolution.
This post explains why.
It has to do with high-resolution displays and the fact that a pixel, is no longer a pixel.
Listen to this post on your podcast app under: Gregory Schmidt, or YouTube
Why are pixels confusing?
There are multiple types of pixels. This chart shows:
The web, written in CSS, has web pixels (px)
iOS instead uses the term points (pts)
Android uses the term density-independent pixels (dps)
These things all are roughly the same. But these are not true screen resolution pixels - as we used to think about pixels in terms of traditional screen displays or dot resolutions in printing.
These are magic pixels that are based on the assumption that high-resolution displays do not exist. They are set to a traditional baseline screen display resolution of about 160 pixels per inch.
When we design for the web, iOS, and Android, we use a pixel unit that pretends the display is being shown on an old display - where one design pixel truly meant one screen resolution pixel.
Because devices today have high resolution screens, we continue to use the traditional design pixels, and the device auto-sizes the work to fit the new higher density display.
Ahh…so a pixel is not a pixel
A brief history of pixels (from 2009 onward)
Imagine a single black square 1 x 1 pixels in 2008. A pixel meant a pixel. Life was easy.
Then ‘high resolution’ mobile screens were introduced, such as Apple’s Retina Display in 2010.
The iPhone 4 with Retina Display was able to pack 640 x 960 pixels on the same physical screen that the prior iPhone 3 only held 320 x 480 pixels.
This meant the Pixels Per Inch (PPI) doubled from 163 PPI to 326 PPI.
Logical Resolution & Points
In order to accommodate the high screen pixel density and avoid driving designers and developers crazy by having their work appear different sizes on different resolution screens, apple introduce Logical Resolution.
Logical resolution essentially is what a device’s resolution would be if it did not have high resolution. This baseline is set at roughly 163 pixels per inch.
Apple uses the term point, to describe a measurement that is in logical resolution.
This means a line that is 163 points long is equal to 163 pixels on a screen with a resolution of 163 pixels per inch.
The same 163 point line on a high resolution display (326 pixels per inch) will use twice the number of pixels but remain the same length.
To summarize, Apple’s logical resolution is defined in points. This is the baseline unit of measurement in coding Apple software.
eg. iPhone XS
Logical Resolution = 375 x 812 points
Screen Resolution = 1125 x 2436 pixels
This means that a designer should set their design canvas to 375 x 812 points when designing for iOS.
What about Android?
Instead of using the term point, Google developed their own term “Density-independent pixels”. The term is exactly what it says.
A density-independent pixel is the size of an element in pixels on the screen that is independent of the actual screen resolution’s pixel density.
Android also used 160 PPI as their default screen resolution.
A line that is 1.5 inches wide when placed on a screen with a density of 160 pixels will occupy a total of 240 pixels on the display. The line is also 240 dp.
If that 1.5 inch line was placed on a screen with a density of 320 pixels it would occupy a total of 480 pixels on the display. However, the line remains 240 dp.
Android also uses the term scalable pixels (sp) to serve the same function as density-independent pixels, but instead for fonts. 1 sp is technically equal to 1dp.
What about the Web?
The web uses also follows the same principles as logical resolution and density-independent pixels.
The unit of measurement on the web is “pixels”. But web pixels are actually similar to points, or density-independent pixels.
Sometimes these web pixels are called, “CSS Reference Pixel” or “CSS Viewport Pixels” or CSS Pixels”. They mean the same thing (As far as I can tell).
Consider also reading in this series:
Part 1 : UI/UX: Writing X vs Y dimensions
Part 2: Why are phone dimensions backwards: Height x Width ?
Part 3: Why 4K is misleading
Part 4: When is a pixel not a pixel? pixels, points, dps (this article)
Background
Sebastien Gabriel
The most detailed article I’ve seen on this is by Sebastien Gavriel (of Google), who explains the evolution of resolutions from printers (dots per inch) to screens (pixels per inch) to high resolution displays that involved image ‘multipliers’, dp, pt, and sp. Highly recommended.
https://sebastien-gabriel.com/designers-guide-to-dpi/
Peter Nowell: Pixel Density, Demystified
Background on the evolution of points and dps
https://medium.com/@pnowelldesign/pixel-density-demystified-a4db63ba2922
iOSRes
Shows the logical resolution of different Apple products
http://iosres.com
Google Material Design: Pixel Density
https://material.io/design/layout/pixel-density.html#density-independence
