Designer’s Guide to DPI – Converting to Real World Sizes

On the web, DPI stands for density pixels per inch. PPI simply stands for pixels per inch. (Although DPI originated in the print industry, it’s often used in place of PPI on the web due to its modernized definition.)

Whichever initialism you prefer, you need to understand how DPI settings affect the way that your graphics will appear on-screen if you’re designing websites or apps.

The unofficial standard for graphic design for the web is 72 DPI. That was Photoshop’s standard DPI setting in the days of the first Mac computer, the 128K. (Here’s a nice comparison of the 128K’s pixel density vs an iPad’s.)

By using 72 DPI, printing was more reliable. And 72 DPI has stuck with us, rightly or wrongly.

In practice, many of the devices we use have considerably higher DPI than 72, which introduces lots of challenges. Fortunately, there are known conventions that will help you as you develop your design.

Why Screen Resolution Matters

Imagine that you have two devices that are the same physical size. Device 1 has a screen display of 72 DPI. Device 2 has a display of 144 DPI.

If you design an image at 72 DPI, the image will display at exactly the size that you intended on the 72 DPI screen. But on the 144 PPI screen, it will be half the size that you intended, because the display has twice as many pixels.

Remember: physical size has no bearing on DPI at all, except that smaller screens are cheaper to produce, so they tend to have higher DPI than large screens. On today’s devices, there is a huge variance in DPI, even for devices of a similar size:

• Apple Cinema Display: 99
• Microsoft Surface: 148
• Amazon Kindle Fire 7″: 170
• Apple 12″ MacBook: 226
• BlackBerry Passport: 453
• Samsung Galaxy S7: 576
• Sony Xperia Z5 Premium: 801.

(You can instantly find out the DPI of your screen to see how it compares.)

If you didn’t correct for this in your designs, your 72 DPI graphic would be tiny on the Sony Xperia Z5 Premium. This is why you need to know how to deal with huge differences in pixel resolution.

Don’t rely on branding or marketing to describe display resolution in any consistent way. For example, Apple’s Retina branding describes a lot of different display densities, depending on the device that you’re looking at. The lowest Retina display is 218 DPI, and the highest is more than 400.

To develop consistent designs, you need a different approach.

Using Dp and Points For Simple Scaling

Once you understand the units of measurement in iOS and Android, you can completely disregard the pixel measurement for your design.

Instead, you can use the concept of virtual pixels, or CSS pixels.:

This is slightly different on Android vs iOS:

• dp stands for device independent pixel, or density-independent pixel. It’s used on Android. One dp measures 1/160 of inch.
• Points are the equivalent for iOS. One point measures 1/163 of an inch.

So while there’s a subtle difference in density, the systems are very similar.

If you design using a dp measurement for an Android app layout, you don’t need to know exactly what the measurements are for every device that’s going to display that layout. The device knows its own multiplier, and applies it to the dp value, so it will automatically render your design at the intended size. There’s more on this in the Android developer documentation.

If you design using points for iOS, all you need to know is that some Apple devices display a point as 1-pixel square, some display it as 4 pixels square, and some display it as 9 pixels square. In other words, the point measurement is subject to a multiplier of 1, 2, or 3 to fit the required screen resolution for any iOS device.

Using Android Screen Density Qualifiers

Every Android device is categorized in categories or buckets according to screen density. There are thousands of different devices out there, so this concept helps to simplify a designer’s prep work by narrowing down the devices that they need to create images for.

When you create an image for Android, like an app icon, there are six qualifiers you need to know about:

• Low (LDPI): any device up to 120 DPI, multiplier of 0.75
• Medium (MDPI): between 120 and 160 DPI, multiplier of 1 (base density)
• High (HDPI): between 160 and 240 DPI, multiplier of 1.5
• Extra-High (XHDPI): 240 to 320 DPI, multiplier of 2
• Extra-extra-high (XXHDPI): 320 to 480 DPI, multiplier of 3
• Extra-extra-extra-high (XXXHDPI): 480 to 640 DPI, multiplier of 4.

When you create your app images or icons, simply place them in folders according to the buckets you’ve created. Together with the dp measurements for the layout you’ve created, Android will automatically pick out the best images for the job.

Designing For Touch

There’s one final piece in the DPI puzzle, and that’s the difference between touchscreens and regular displays. While it’s not directly related to DPI, it’s a good thing to consider.

Graphics obviously looks the same on touchscreens or non-touchscreens, assuming they have the same screen resolution. But there’s a very important difference: people don’t navigate them the same way. A finger tap is a lot less precise than a mouse pointer.

Touch targets are 44x44pt in iOS, and 48x48pt square for Android. You’ll need to make all of your navigation larger, and increase the spacing around it, to avoid the potential for mistakes.

Resources

• Converting DP to PPI: A guide from the Android Developer website
• Pixplicity DP to PPI converter: An excellent calculator and converter
• Tips for Designers: Learn more about Android’s density qualifiers and dp calculations
• BBC Mobile Accessibility Guidelines on Touch Target Size: This article offers excellent best practice tips on designing accessible mobile layouts in HTML
• iOS Design Guidelines: Covers resolution, downsampling, icons, typography, standard layout components, and automatic icon effects.