The Story of Pixel Density and Touch Interface

The first iPhone was introduced to the market with 3.5" display, 320px by 480px with pixel density of 163ppi display. Same goes for iPhone 3G and 3GS. Then came the iPhone 4. It has the same 3.5" display, but packed with twice pixel density of the original iPhone. It’s the first line of Apple products with a tremendous clarity on its display. Retina Display, as it was announced in Apple’s marketing term, yikes! It has physical resolution of 640px by 960px with density of 326ppi. With twice the density, it brought us amazingly sharp lines, shapes and texts that are rendered with a lot more details. Each stroke has more backing pixels. The more dense the display is, the more refined graphics are being drawn on the display. To our eyes, the display looks amazing. The devil is in the detail.

While more pixels are crammed into the same physical size, we can’t keep making our user interface smaller. We introduced what it was called pixel scaling. At 163ppi, it’s 1x scaling. At 326ppi, density doubled, let’s take this as 2x scaling. iPhone 5 came with the same density with iPhone 4. The only difference is that it gets taller screen. Instead of 640px by 960px, now it has 640px by 1136px physical resolution. And then came the iPhone 6 and iPhone 6+. iPhone 6 is rather straight forward, bigger 4.7" display with the same density of 326ppi as iPhone 5, but yeah bigger. Meanwhile iPhone 6+ was going to be the first line of Apple devices to go with 3x* scaling. If iPhone 6+ wants to go 3x scaling At 5.5" then it should have a display with density about ~480ppi. But no, iPhone 6+ has a display density of 401ppi with physical resolution of 1080px by 1920px. Surprise, surprise! (Read: The Curious Case of iPhone 6+ 1080p display)

The math behind pixel density

I had been mentioning ppi as a unit measurement of pixel density. It is not the best way but probably the most common way to quantify how dense a display is. Pixel density of a display doesn't actually come in a whole precise ppi number which stands for physical pixel per inch. So when I say 326ppi, it doesn’t actually mean exactly 326 pixels packed into 1" physical dimension.

How does one derive this pixel density quantity? By dividing how many discrete physical pixels on the its screen width against its physical display width in inches. Likewise, you will arrive at about the same ppi too if you choose to divide pixel count on its height against its physical screen height in inches.

But there is a little problem here. On most product marketing specifications, we usually are given only the display’s diagonal measurement accompanied with its screen resolution. Well it doesn't matter. Let’s simply take hypothetical diagonal pixels derived from its screen resolution and divide it with its display’s diagonal in inches. For example, 320px by 480px for 3.5" display. Put your basic Pythagorean formula on. d = (w * w + h * h) ^ 2. With that, calculating diagonal pixel is easy, in this case (320*320 + 480*480) ^ 2 = 576.88px. If you are on Mac OS X, you can simply put this on your spotlight (320 ** 2 + 480 ** 2) ** 0.5. It should be showing 576.88 on the search result listing. Now divide 576.88px with 3.5", you will get 164.8ppi. It will usually get rounded up as 165ppi. Close! The official number used here is 163ppi.

Physical display density and virtual screen density, pixel scaling in between.

When building applications, at best we would like to simply refer to a single screen resolution. It’s not fun having to define a button with 44px height on one screen and 88px height on the other. This is where we introduce pixel scaling. As a programmer you will only need to specify 44pt height button. With a single reference unit, you will less likely encounter any future confusion.

Ah, pt instead of pixel. 1pt can be formed by 1 by 1 pixel or 2 by 2 pixels grid. Or even a fraction of pixel if you are a droid. There is ppi to describe physical display density. Now I want a point per inch to describe this virtual screen density. Let’s call this dot per inch or dpi. No it’s not dip as in device-independent-pixel to avoid confusion with a term used in Android.

A screen with 163dpi is 163ppi display with 1x scaling factor. And it can be 326ppi display with 2x scaling factor. So one thing for sure when we design our 44pt button height on 163dpi screen, it will be translated to the same exact physical size. It doesn't matter if it is 163ppi display or 326ppi display.

The baseline reference

When we ordered an M-sized T-shirt, we want it to be about medium sized T-shirt. We wouldn't want it to be half the size because the T-shirt is woven in silk. The same goes with our displays. I don’t want my app’s user interface to shrink because it is now packed with more pixels.

First mover advantage, The launch of original iPhone let Apple established the baseline of screen density for touch interface. This baseline density will be the reference for all the rest of future touch devices. Well at least future Apple touch devices, if the droid camp refused.

Now looking at original iPhone, we came up with an imaginary arbitrary range for acceptable screen density. Screen density of 150dpi-170dpi is good for phone or touch devices a palm away from your eyes. And 115dpi-155dpi is considered good for touch devices an arm length distance away from our eyes. Anything below 115dpi, app’s user interface will appear much bigger. Anything above 170dpi, it will be smaller than usual for the exact same point.

Why are these baselines so important?

At first it wasn't that important, until it is.

1. Our app designers and developers had been working with pixel unit since the early age of VGA display. We haven’t switched to inch as measurement unit when we design our application’s user interface. The same 1000px banner can appear differently in inches physical size, depending of screen’s dpi density. The higher the dpi, the more pixels there are in one single physical inch, more UI goodness will be squeezed into that screen resulting in smaller UI size. So screen density directly co-related to how much UI goodness we can pack into a screen size.

2. Our eyes are less susceptible to wide variations of screens with different densities. When we have 30” dell monitor at 100dpi, we simply put the monitor an desk length from our eyes. Then we have Macbook Air screen with 135dpi, we simply put our Macbook Air closer to our eyes, an arm length away. 55” beautiful curved 1080p HDTV at 40dpi, put it 10 feet away from the sofa we sit on. At 0.22” 640x360 Google Glass display has 3338dpi!! Just put it next to our eyeballs. Distance plays along to compromise screen density.

3. But remember that we are dealing with touch devices here. When we tell our developers and designers that button UI should be 44pt height, it is materialized into the screen about a reasonable size of tap-able area comfortable to our fingers, well ~0.275” at 160dpi screen to be more precise. Look, we want that 44pt to be about the same physical size on our iOS devices and Android devices. We don’t want 44pt appear to be a finger size and because Android managed to cram more pixels into the screen, the button is now half a finger size, barely tap-able. It doesn’t work that way. Yes in alternate ideal world, 200dpi display is okay as long as your developers are willing to tweak the size of that particular button from 44pt to about 55pt size. But imagine every devices have its wild range of dpi, how many developers do we need to change the size of a button? Screen density matters because our finger size is more or less one fix size. Now we speak finger taps. When our UI is too small, the distance is not able to cover its poor tap-able area.

4. Yes, Apple set those baselines. Period. And they broke them too, remember the iPad mini case.

Finding the next compromise

We know how important the baseline dpi reference is. And we know that we live in an Apple established design world where everything is pixel-perfect, nicely lined up.

Yet, we live in the world of display density race now, more screens are coming with higher and higher ppi. Apple came out with 163ppi display, I will just cram more pixels into the display to one-up Apple. Okay, why not 213ppi display (Nexus 7). I can either go for 1x scaling at 213dpi screen which will make my UI way smaller, or I will go for 2x scaling at 107dpi with bigger than your momma’s thumb UI. Oh wait, screw Apple, screw pixel-perfect. I will just stick with 160dpi and choose 1.33125 scaling factor. Congratulations, I give you the blurry inconsistent 1pt lines. Who’s designing with 1pt lines anymore nowadays. Isn’t it flat now?

Apple has been so far wise enough to choose precise integer scaling factor as 1x and 2x. Apple chose 2x scaling factor for 326ppi iPhone 4, and also 2x scaling factor for 264ppi iPad retina. Of course legally speaking, no one can stop you from choosing any scaling factor you wish.

It’s clear that the reason Apple chose precise scaling factor has been driven by the intention to produce crisp design with no compromise on pixel-perfect UI elements rendering. That masterstrokes are often seen on those 1pt stroke lines in Apple designs. Apple thinks for the developers and for the consumers too. Since the inception of its original iPhone, Apple has been adamantly guarding how its User Interface will be rendered on user devices. The original iPhone to its iPhone 4S had exactly the same effective resolution of 320pt by 480pt. We praised Apple’s UI workmanship and its call on attention to detail.

There is an interesting case of iPhone 6+ where Apple choose not to continue with the pixel-perfect scaling tradition. Read it here: The Curious Case of iPhone 6+ 1080p Display