What is pixel density and how to take it into account when designing mobile interfaces

Pixel density is the number of pixels that fit within a specific physical size (usually an inch). The first Mac had 72 pixels per inch, which sounds like a lot, but it was actually huge pixels that not every graphics card could handle.

Icons on a 1984 Macintosh computer.
Designer Susan Kare Since then, screen technology has advanced significantly - even the simplest displays now have a resolution of between 115 and 160 pixels per inch (PPI - pixel per inch). But a new chapter in this story began in 2010, when Apple introduced the iPhone with a Retina display, a super-sharp screen that doubled the number of pixels per inch. The result is graphics that are sharper than ever.

The difference is especially noticeable in the mail application icon and in the text

To maintain the same physical dimensions of UI elements, the number of pixels per inch had to be increased. The button, which previously took up 44px, now takes up 88px.

For cross-device compatibility, designers must produce graphics for both regular displays and Retina displays. But here another problem arose: now the designer cannot say that some element should be, for example, 44 pixels in height, because on another device the same element should be twice as tall.

The solution was points, or pt. One point corresponds to one pixel on pre-Retina screens and two pixels on Retina screens. Now, if a designer is told that the height of an element is 44 pixels, he can adapt this size to any pixel density ratio - 1x, 2x, or 3x in the case of the iPhone 6 Plus.

PT and DP

Of course, this is all relevant not only for Apple devices. Every operating system - desktop or mobile - supports high ppi/dpi screens. Google came up with its own pixel-independent unit of measurement for Android, called DIP - Density Independent Pixel, abbreviated as "dp". This is not the equivalent of iOS, but the idea is similar. These are universal units of measurement that can be converted to pixels using the device's scale factor (2x, 3x, and so on).

You may be wondering about the physical size of the item. In fact, interface designers don't have to think about this, since they have no control over the hardware features of the screens of different devices. Designers need to know what pixel densities the manufacturer has adopted for their devices, and take care of preparing interfaces at 1x, 2x, 3x, and so on.

Apple devices do not have a single pixel density that represents a single point—it depends on the specific device (see "Scale Perception" below). In iOS, the point varies from 132 dpi to 163 dpi. On Android DIP is always 160 ppi.

The concept of "HiDPI"[ | ]

Supporting high pixel density (marketing term HiDPI) for an application program is a difficult task. In particular, the developer of an application program (and a front-end framework like VCL or ) must:

• Tell the OS that workarounds (such as mechanical scaling introduced in Windows Vista) should be disabled.
• Specify the layout of the windows.
• Raster images are not directly scaled. Depending on the PPI, the purpose of the pictures and the design of the program, you need to replace them with better ones, mechanically enlarge them, or do nothing and accept that the pictures will look smaller.
• If the program uses visual components of its own making, you need to draw them in an enlarged form.
• It happens that in a multi-monitor system, one monitor is new with a high PPI, and the second is old. Windows 10 tried to solve this issue by setting different PPIs for different monitors, but this also requires support from application software.

Since it turned out that the program developer often declares that the program supports HiDPI, but cannot keep this word (or vice versa, as in µTorrent, it supports HiDPI, but does not declare to the system), in Windows 10 a manual setting of the scaling method appears in the shortcut settings.

Controlled Chaos

In the early days of high-resolution mobile devices, pixel densities were simply 1x or 2x. But now everything is different - there are a lot of pixel densities that the interface must support. Android has a great example: as of this writing, different manufacturers support six different pixel densities. This means that an icon that is the same size on all screens should actually come in six different variations. For Apple, two or three different sources are relevant.

Conclusion

Obviously, manufacturers should not chase high resolutions and a large number of pixels on the screen. Instead, they should consider introducing new technologies that can take image quality to a whole new level. This is precisely the strategy that Xiaomi is now following.

Sources

• https://MonitorVsem.ru/lajf-hak/piksel
• https://AndroidLime.ru/what-is-ppi
• https://fps-up.ru/monitor/chto-takoe-plotnost-pikselej-i-kolichestvo-na-dyujm-ppi
• https://voprosoff.net/1978/%D1%87%D1%82%D0%BE-%D1%82%D0%B0%D0%BA%D0%BE%D0%B5-ppi-%D0%B8 -%D0%BA%D0%B0%D0%BA%D0%B8%D0%BC-%D0%BE%D0%BD%D0%BE-%D0%B4%D0%BE%D0%BB%D0% B6%D0%BD%D0%BE-%D0%B1%D1%8B%D1%82%D1%8C
• https://sravnismart.ru/ppi/
• https://pomogaemkompu.temaretik.com/1879045553371482940/chto-takoe-ppi-ili-naskolko-vazhna-plotnost-pikselej/?comment=1881188554165193790&single
• https://xiaomishka.ru/vazhna-li-vysokaya-plotnost-pikselej-na-displee-smartfona
• https://geek-nose.com/ppi-chto-eto/

Vector design

There are a couple of practical lessons you should take away from all of this. To begin with, you should create your designs in vector. This allows our interfaces, icons and other graphics to scale to any size needed.

Second lesson: we must draw everything on a 1x scale. In other words, create a design using points for all dimensions, then scale to various larger pixel densities when exporting. Scaling 2x graphics by 150% to create a 3x version results in blurry edges, so it's not the best option. But scaling 1x graphics at 200% and 300% allows you to maintain clarity.

The resolution of iPhone app layouts should not be 750x1334, but 375x667 - this is exactly the resolution in which the application will be displayed. Most designer tools don't differentiate between points and pixels, so you can assume points are pixels and then simply export the source at 2x or 3x size.

What does pixel density affect?

The higher the pixel density, the sharper the image you will see on the screen. If earlier this did not matter much, then with the advent of the era of virtual and augmented reality the situation is gradually changing. You hardly want to see a pixelated image around you in virtual reality mode. The higher the resolution and pixel density, the more real the image. Moreover, this can be noticeable not only when using a virtual reality headset, but also when watching movies.

When buying smartphones, monitors and other equipment that has a screen, we often hear about such a thing as ppi, but few of us can say exactly what it is and what it affects.

But in fact, this characteristic is one of the main ones when choosing.

We will tell you what the actual meaning of this concept is (after all, you can find many myths on this issue on the Internet). Go!

Fake it 'til it's true

It's worth mentioning that sometimes devices lie. They pretend that their pixel-to-point conversion factor is, for example, 3x, but in fact, it is 2.61x, and the source itself is scaled by 3x for convenience. This is what the iPhone Plus does, for example. It compresses an interface made at 1242x2208 to a screen resolution of 1080x1920.

Design for iPhone Plus as if it were 3x.
The phone itself will scale it to 87%. Since the graphics are only slightly scaled down (87%), the result still looks decent - a 1px thick line on an almost 3x screen still looks incredibly sharp. And there is a chance that Apple will introduce a real 3x iPhone Plus in the future, since the necessary hardware capabilities may well be available for a product produced in such huge quantities.

Is this non-integer scaling approach acceptable? Everything is tested in practice. Is the result of such scaling quite invisible? Many Android devices also resort to scaling to fit the more standard pixel-to-dot ratio, but unfortunately some of them do not do it very well.

This kind of scaling is undesirable because anything you want to be sharp will become blurry due to interpolation. Unfortunately, as pixel densities reach 4x and beyond, the blur caused by non-integer scaling becomes much less subtle, so I predict device manufacturers will increasingly use this approach over time. We can only hope that performance shortcomings will hold them back.

How to measure PPI?

The need to introduce PPI as a separate characteristic is due to the impossibility of describing image clarity with screen resolution alone: ​​the larger the display diagonal at a constant resolution, the more blurry the image will be.

By definition, PPI is calculated as the ratio between the number of pixels per screen diagonal in inches. To determine this indicator yourself, we will use a formula using the Pythagorean theorem:

• Here ω is the screen width in pixels (for example, 1920 for Full HD);
• h — screen height in pixels (1080 for Full HD);
• d — display diagonal in inches.

For example, a standard 21.5-inch office monitor with Full HD resolution will have a pixel density of 102.5 PPI, while a 5-inch phone with HD resolution can already boast 293 PPI.

Perception of scale

Should the button be the same size on different devices? The answer depends on

• accuracy of input method (sensor or cursor);
• physical screen dimensions;
• distance to the screen.

The last two factors go hand in hand because tablets have larger screens compared to smartphones and we keep it further away from us. There are also laptops, desktop computers, televisions - the distance between the eyes and the screen increases with the size of the latter.

The button on the TV screen should be the size of a phone, because otherwise it won’t be visible while sitting on the couch.

Here's a less dramatic and very true example: application icons on a tablet should be larger than the same icons on a phone. This is implemented in two ways: using lower pixel density or different icon sizes.

About choosing displays

There are several rules that will help you choose the display correctly, taking into account the pixels, they sound like this:

1Be sure to pay attention to the display type. The priority should be AMOLED, even better SuperAMOLED or OLED. Such devices will always be better than IPS, LCD and others. Let's say we come to the store and see, for example, two excellent devices - Samsung Galaxy J7 and Xiaomi Redmi Note 3. Their price is almost the same, the second device, by the way, is more powerful.

The specifications indicate that Xiaomi has 400 ppi (for some reason, some write 400.53, but, as we said above, there cannot be a non-integer number of pixels).

Samsung has 267 PPI and the resolution is correspondingly lower (1280x720 versus 1920x1080). The diagonal is the same - 5.5 inches.

But for some reason the picture is clearer on Samsung. And all due to the use of proprietary SuperAMOLED+ technology. You can see this for yourself if you pay attention to Figure 5.

Rice. 5. Xiaomi Redmi Note 3 and Samsung Galaxy J7

2Try to find an opportunity to look at all the samples you have chosen in person. You can first look at their options on the Internet, and then go to an electronics store and see how they actually display pictures. A personal view in this case is simply irreplaceable.

3Pay attention to the battery. If we talk about smartphones, to ensure long-term operation of the device with a clear image (high ppi and/or good technology), the battery capacity should be about 3000 mAh. For tablets it should be even higher, since their diagonal is larger than that of phones

4Remember: the smaller the diagonal and the higher the pixel density (the number of pixels per inch), the clearer the image. Don't deceive yourself - you won't be able to achieve a very clear picture with a huge display and a small pi-ay value. It is important to maintain a golden mean here.

5It is also important to consider coverage. This way, matte screens will produce a less clear and saturated image, but will be more gentle on your eyes. But glossy displays will negatively affect your eyesight, but the image on them will be much more beautiful. In this case, their ppi value may be the same.

This is mainly relevant for choosing monitors for PCs and laptops. If you work on a computer full time or even more, it is better to go for the matte option.

Rice. 6. Glossy (left) and matte (right) laptop screens

All this will allow you to choose the most suitable display for yourself.

Related materials

We've just discussed a ton of challenges that designers face. Fortunately, interface design uses units that are independent of density (like pt or dp).

List of resources on this topic:

• Google Device Metrics - list of specifications for all types of devices (Android, iOS, macOS, Windows). Screen sizes, pixel density, and even the approximate distance at which the screen is located from the user's eyes.
• Bjango app icon templates. These templates (available to all major design editors) are useful both in a practical sense and for reference on the latest specifications for Android, iOS, macOS, tvOS, watchOS, Windows, Windows Phone.
• DPI and PPI Guide. A comprehensive tutorial by designer Sebastian Gabriel that covers even more detail and practical techniques for Android and iOS designers.

There are also some resources on pixel density for designers.

Vision standard

Typically, a person's visual acuity is measured using the Snellen test, which was invented in 1860 for medical purposes. It is important to note that with this system, the ophthalmologist was trying to identify low vision, which is a medical problem. No patient ever complained of above average visual acuity.

This means that visual acuity of 20/20 is not ideal at all. This indicator means normal vision, in which a person can read a table at a distance of 3 meters.

Standard monitor resolutions

The following list outlines some of the most common monitor resolutions currently available on the market, from lowest monitor resolution to highest.

Resolution 720p

Other names: HD, HD Ready, Standard HD

720p or 1280x720 is the resolution of a progressive style monitor. This is the lowest resolution that supports HD and is used by all common HDTV broadcasters.

1080p resolution

Other names: Full HD, FHD
1080p or 1920x1080 is a non-interlaced monitor resolution that is positioned as the first resolution to fully utilize the full capabilities of HD. 1080p is now the standard resolution for television, internet streaming services, video games and smartphones.

Resolution 1440p

Other names: 2K, WQHD, QHD
1440p resolution is a progressive resolution containing 2560x1440 pixels. 1440p, known as "Quad HD", is 4 times "stronger" than basic HD. 1440p is not widely adopted, but can be found in the smartphone space, including from well-known companies such as HTC, Samsung, ViewSonic and Apple.

4K resolution

Other names: UHD, Ultra HD, 4K UHD
4K resolution is so called because of the number of horizontal pixels - 3840x2160. 4K resolution also has 4 times more pixels than 1080p. Although the market share of 4K resolution has been increasing since 2014, its adoption is still limited by the technical capabilities of existing devices and communication channels.

8K resolution

Other names: 8K UHD
8K resolution is 7680x4320 pixels and is currently the highest monitor resolution available on the market. The technology is so new that commercially available 8K UHD TVs and broadcast programming are just now becoming widespread.