As a UX/UI designer, I’ve often encountered confusion surrounding why we set artboards to a pixel size that is significantly different from the actual number of pixels on a device’s screen. The relationship between screen resolution, logical resolution, and design is critical, especially when we consider the impact of accessibility features, such as the ability to adjust text size.

The Challenge of Pixel Density and Accessibility

I use an iPhone 13 with a screen size of 6.1″ and a resolution of 1170 x 2532 pixels, resulting in 2,962,440 pixels on the display. While this might seem straightforward, the challenge lies in the variety of devices with different screen sizes and resolutions. This discrepancy has led to the development of methods like PPI (pixels per inch), which helps compare screen resolutions across devices with different physical sizes.

However, the introduction of high-density screens like Apple’s Retina display in 2010 changed the game. Suddenly, a pixel on a high-density screen wasn’t just a single physical point of light — it could represent multiple pixels in logical resolution terms. Apple introduced the concept of a logical resolution and a new unit, the point, to handle this abstraction. Points are a way to create consistency across devices, regardless of their screen size or resolution.

The term commonly used for responsive pixel sizing on mobile devices and design is “density-independent pixels” (dp) for Android and “points” (pt) for iOS.

These units are designed to provide a consistent experience across various screen densities, ensuring that UI elements, like buttons and text, appear at an appropriate size regardless of the device’s resolution.

• Density-independent pixels (dp or dip): Used in Android development, this unit is relative to a 160 dpi (dots per inch) screen. It’s used to maintain consistency across devices with different screen densities.
• Points (pt): iOS uses points as an abstract unit of measurement, which is also independent of screen resolution. In iOS, logical resolutions are rendered as points and then scaled to the appropriate pixel density of the device.

Both terms help developers create responsive designs that scale properly across different screen resolutions, ensuring that text and UI elements remain legible and usable on various mobile devices.

The Evolution of High-Density Screens

The key to understanding high-density screens is recognizing that the pixel is no longer a simple, fixed-size element. With devices like the iPhone 11 or 16 Pro, or Samsung Galaxy S24 Ultra, we see different scale factors (x2, x3, x3.75 respectively), where the physical resolution is multiple times greater than the logical resolution. For example, an iPhone 11 Pro’s logical resolution is 375 x 812 pixels, but after rasterization (where the points are converted to pixels), the physical screen resolution might be 1125 x 2436 pixels.

Press enter or click to view image in full size

This method ensures that high-density screens can deliver crisp, detailed images without distortion. But why does this matter for accessibility and user experience?

The Impact on User Experience and Accessibility

In accessibility design, ensuring users can adjust text size and element dimensions is paramount. On both iPhone and Android devices, one of the most common accessibility features is the ability to increase text size and scale elements across the device (the other top feature is Dark Mode — this is according to a study in the Netherlands). Increased font size helps users with visual impairments, but is also widely used by people without disabilities to enhance readability.

When designing for different screen densities, one of the best practices is using relative units like rem (relative ems) instead of fixed units like pixels. The rem unit is based on the root font size and scales proportionally when users adjust their settings. This allows text and UI elements to resize smoothly across devices, respecting the user’s preferred text size, which is a core accessibility feature.

For example, increasing the text size will scale all the text and elements across the webapp, as long as the design uses relative units like rem or em (or dp or pt on mobile). This ensures that text remains legible, and interactive elements stay appropriately sized for touch targets. In contrast, using pixels (px) would lock the design to a fixed size, making it less flexible and more difficult for users to scale the content as needed.

Designing with Logical Resolution

Given that high-density screens use logical resolution for rendering, designers should always work with the logical resolution when creating designs. This helps ensure consistency across devices. By focusing on logical resolution, designers can create lighter files, which improves performance, especially when managing large projects with many interfaces.

Furthermore, using scalable assets like SVGs for icons and vector-based elements ensures that designs look sharp across all screen resolutions. For raster images, exporting multiple versions (2x, 3x) for different scale factors ensures clarity, even on high-resolution devices.

Press enter or click to view image in full size

The Need for Accessibility-First Design

Understanding the difference between physical and logical pixels is crucial, not just for high-quality design, but for ensuring that your app or website is accessible to all users. By using relative units like rem, designing with logical resolution, and considering the diverse range of screen densities, we can create a more inclusive experience. Accessibility features such as text size adjustment should be prioritized, as they are widely used by the general public and not just those with disabilities.

Designing with flexibility in mind, using logical resolutions, scalable assets, and accessibility-focused units ensures that your design remains functional, readable, and user-friendly across all devices. By prioritizing accessibility from the start, we can enhance the overall user experience for everyone.