Pixel Density, Demystified

How pixel density works and how it affects your designs.

Peter Nowell
Jun 10, 2016 · 9 min read

This article & video were originally created as part of the UX course in Sketch Master.

Check out the top pixel density resources for designers.

Icons for the original Mac, designed by Susan Kare.
Notice the difference the Mail icon’s envelope and the clarity of text labels.

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.).

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.

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.

Your Eye’s Perception of Scale

Let’s put all this pixel density stuff aside for a minute, and consider this question: should a button always be the same physical size across devices? Of course we’re just using a button as an example, but we could be talking about an icon, or text, or a toolbar. Should these be a consistent size across all devices? The general consensus is that it depends.

  • It depends on the physical size of the screen
  • And it depends on your distance from the screen

Lower Pixel Density

Larger screens that we use at a distance tend to have lower pixel densities. A TV might be as low as 40 pixels per inch! For typical TV-viewing that’s permissible. An iPad’s retina display is around 264ppi while an iPhone’s retina display is 326ppi. Because the pixels on an iPad are larger (the screen is less dense), the entire interface becomes slightly larger. That accounts for the extra distance from the iPad’s screen.

Different Dimensions

But every once in a while, using a lower pixel density isn’t enough… a specific design element needs to be even larger. This happened with app icons on the iPad. On the iPhone they’re 60×60, but the iPad’s larger screen offers a lot more space, so there’s a considerable practical (and visual) upside to using 76×76 app icons.

Sanity Check?

We’ve just discussed a ton of co-existing complexities for you to reconcile. Fortunately, interface design is just a matter of using density independent units (like pt or dp). It’s more complicated for app icons, but there are templates to help you with that. Here’s a list of resources on these topics:

Essential Resources

Google Device Metrics: An impressive list of specs for devices of all kinds (Android, iOS, Mac, Windows, etc.). Get screen dimensions, pixel density, and even the approximate distance the device is held from a user’s eyes. ScreenSiz.es is a similar resource.


Peter Nowell

Written by

Designer working across UX, web, branding, & traditional graphic design. Creator of Sketch Master — online training courses for Sketch. pnowell.com