Demystifying Density

Dots Per Inch and Pixels Per Inch, DPI and PPI respectively, are units for measuring the tiny bits of color that come together to form a printed image or an image on a screen. The higher the density of those dots or pixels, the higher the resolution. For most, a rudimentary understanding of DPI or PPI amounts to knowing whether or not an image is clear but small enough to print, email, or post to social media. However, for designers, understanding screen density and ratio is essential to delivering delightful user experiences across devices. Designing for phones, tablets, laptops, watches, and hybrids without a proper knowledge of dpi and ratio is a lot like building a house using the wrong measurement—things are going to look very weird very quickly (and good luck getting through the door!).

Understanding the intricacies of PPI became essential when I started working on consistency for the Chrome team. In lieu of having a comprehensive guide to PPI and DPI, I had to learn on the job, making mistakes and experimenting along the way. After a year and a half of creating hundreds of assets across all the major mobile and desktop platforms, and receiving countless questions from other designers along the way, I realized I wasn’t alone in my struggle. So I decided to write down everything I knew. At first, I only intended to share my findings internally at Google, but the level of frustration among designers seemed so universal, I decided to publish it broadly. As it turns out, even I underestimated the demand. The resulting article, A Designer’s Guide to PPI and DPI, got over 80,000 hits its first month posted.

The guide approaches PPI and DPI in the simplest way possible—no overwhelming technical details, no convoluted math formulas, just a simple and step-by-step guide to understanding screen density and how it impacts your design and process. It’s structured to take you through each of the key concepts logically. Starting with what it is, illustrating its impact on your design, defining what “retina” is, and introducing the notion of “multipliers” and “pt or dp." The second section focuses on practical application, using realistic examples of how to design specifically for iOS, Android and desktop, as well as exporting specific kinds of assets for both touch and non-touch screens. Additionally, the closing “resource” section is intended to give users a useful list of official guidelines and designer-created tools and tips.

A Designer’s Guide to DPI and PPI has been out for a year. Based on the overwhelming response, it has helped tens of thousands of designers from a variety of backgrounds. With their feedback, I plan to evolve the guide to address new devices and link out to even more resources. While I’m inspired by the rapid pace of innovation in technology, I think that for products to be truly successful, the design (and designers) need to be lockstep with the rate of change.