In order to maintain the same physical size for the user interface, pixel dimensions doubled. A 44px tall button was now 88px tall. To accommodate different devices, designers needed to start providing graphics (like icons) at both the original “1x” scale and also this new “2x” scale. But there was an emerging problem: you could no longer say “hey, this button should be 44 pixels tall,” because it should also be 88px tall on a different device. There was no pixel-density-independent unit of measurement. The solution was “Points,” or “pt” for short. 1 point equates to 1 pixel on a pre-retina display, or 2 pixels on a 2x retina display. They allow designers to say “hey, this button should be 44 points tall” and then any device can just multiply that by its own pixel density ratio… like 1x or 2x. Or 3x in the case of Apple’s plus-sized iPhone.

PT & DP

But this isn’t just for Apple devices of course, these days every operating system — desktop or mobile — supports high ppi/dpi screens. Google has defined their own density-independent unit for Android. They aren’t called “points”, they’re called “DIPs”, which stands for density-independent pixels. The shorthand is “dp”. They’re not exactly equivalent to points in iOS, but the idea behind them is the same. They’re a universal unit of measurement, that can be converted to pixels using a device’s scaling ratio (2x, 3x, etc.).

You may be wondering about the physical size of a point. There’s actually very little practical need for UI designers to worry about it, because we have minimal control over device-specific alterations. Designers just need to trust that the device maker has settled on a pixel density that is appropriate for that device, and focus our attention on preparing design assets at 1x, 2x, 3x, or any other ratio. But if you’re really curious, know that on Apple devices there’s no constant conversion between inches and points. In other words there’s no single pixel density that represents 1 point — it’s dependent on the specific device (see Perception of Scale section below). On iOS, a point varies from 132 points per inch to 163 points per inch. On Android, DIPs are always based off 160 ppi.

Controlled Chaos

Get ready for the reality check. In the early days of high resolution mobile devices, pixel density was as simple as 1x or 2x. But now it’s absolutely nuts — there are many pixel densities to support. Android is a perfect example: at the time of this article there are six common pixel densities across all the different device makers. This means that an icon that appears to be the same size on all of these screens actually requires 6 different graphics. For Apple devices it’s more like two or three different graphics.

Design in vector. Design at 1x.

There are a couple practical lessons to take away from all of this. To begin with, we should all be designing with vector shapes. That allows our interfaces, icons, and graphics to scale to any size.

The second lesson is that we should all be designing at 1x scale. In other words, design using points for all measurements, then scale up to various higher pixel densities when exporting… as opposed to designing at a device’s final pixel dimensions (2x, 3x, etc.) and getting into all kinds of trouble during export. Because scaling a 2x graphic 150% to generate a 3x graphic produces blurry results, but scaling a 1x graphic 200% and 300% retains visual clarity.

Mockups for a standard-sized iPhone should be 375×667, not 750×1334 which is the resolution they’re actually displayed at. Most design tools don’t distinguish points from pixels (Flinto is the only exception I’m aware of), so it’s up to designers to pretend that units in pixels are actually points, then have the flexibility to export at two or three times the size.

Fake it ’till ya make it!

This is a bit more advanced, but it’s worth mentioning: sometimes devices fake it. They pretend their pixel-to-point ratio is a common one, like 3x, but it’s actually 2.61x and the image is scaled to 3x for convenience. This is what the iPhone Plus currently does. It shrinks an interface made at 1242×2208 down to fit on a 1080×1920 screen (the phone’s graphics chip performs this scaling in real-time).

Design for the iPhone Plus as though it was truly 3x. The device will scale it 87% for you.

Because the image is only being scaled down a little bit (87%), the result still looks decent — a 1px line on a nearly-3x screen still looks pretty darn crisp. And chances are, although I have zero inside information, Apple will probably release a true 3x iPhone Plus in the future as those hardware components become viable for a product made in such outrageous quantities. The current iPhone Plus is probably faking it until it makes it.

(Bruce Wang wrote a great article about the iPhone 6 Plus’s screen.)

Is this scaling-by-non-integers approach acceptable? Ultimately, the proof is in the pudding; is the scaling subtle enough to be imperceptible? Many Android devices also use scaling to achieve a more standard pixel-to-point ratio, and unfortunately some of them do it really poorly. Scaling like this is undesirable because everything that you designed to be crisp and pixel-perfect at a certain scale will become blurry due to interpolation (i.e. a 1px line becomes 1.15 pixels). Even if you’re not a fanatical pixel perfection nerd like I am, there’s no denying the fact that design elements need to align with full pixels in order to appear crisp to our eyes. Unfortunately as pixel densities enter the 4x and above range, the blurriness caused by non-integer scaling becomes far more difficult to perceive, so I predict that device makers will be using this approach more as time goes on. We can only hope that the performance drawback of scaling will deter them!