The DPI setting, which stands for "dots per inch" is a widely available configuration option in operating systems, enabling users to adjust the size of on-screen text and other elements. This setting can be expressed in two ways: as a percentage or in terms of dots per inch. The standard setting is 100%, which corresponds to 96 DPI.

The following table lists common DPI settings:

100%

96 DPI

125%

120 DPI

150%

144 DPI

175%

168 DPI

200%

192 DPI

Despite its name, the DPI setting has little to do with actual "dots" or "inches" on the display. The term "dots per inch" is a legacy from the early days of printing, when it described the number of physical ink dots that a printer could produce per inch of paper.

In the context of computer displays, the DPI setting is simply a scaling factor that determines the size of text and images on the screen. Despite its name, the DPI setting does not measure the physical pixel density of the display. Instead, it controls the perceived size of graphical elements. As we'll see, this distinction is important for understanding what DPI really means.

Visual Acuity of a CSS Pixel

While the DPI setting is often associated with visual acuity, it's actually a somewhat indirect relationship. To relate DPI to visual acuity, we need to introduce a measure of visual acuity that takes into account the physical characteristics of the display and the viewer's distance from the screen.

One way to do this is to use the CSS pixel as a unit of measurement. A CSS pixel is defined as 96 pixels per inch (PPI) at a viewing distance of 28 inches from the screen. To convert this to a more universal unit, we can express it in centimeters: 96 PPI is equivalent to 0.2646 mm per pixel, and 28 inches is 71.12 cm. Therefore, one CSS pixel has an approximate size of 0.2646 mm at a viewing distance of 71.12 cm.

A CSS pixel is a dimensionless unit, representing a ratio of size to distance. It can be expressed as a fraction of the viewing distance, which is independent of the unit of measurement. Specifically, it equals 1 / (96 × 28), which is 1 / 2688. The reciprocal value is the visual acuity, therefore, the visual acuity of a CSS pixel is 2688 .

This value can also be expressed in terms of an angular measure, with one CSS pixel corresponding to an angle of approximately 1.2789 arcminutes.

The traditional definition of normal human vision, known as 20/20 vision, is equivalent to an angle of exactly one arcminute. However, this definition is largely historical, as modern measurements have shown that most people can perceive even finer details. At typical display distances, the median angular resolution of human vision is approximately 0.85 arcminutes, which corresponds to a visual acuity of 4044. Notably, this exceeds the visual acuity of a CSS pixel by around 50%.

It's worth noting that a CSS pixel is an abstract unit that doesn't correspond to any relevant physical property. Instead, its purpose is to provide a consistent and standardized way to measure angular sizes across different devices and displays. As long as all users employ the same measurements, the resulting angular sizes will be identical, regardless of the physical characteristics of their displays. The CSS standard defines a CSS pixel with the goal of achieving consistent angular sizes, thereby ensuring a uniform user experience across diverse devices and platforms.

The Correct DPI Setting

Determining the correct DPI setting is essential for comfortable viewing, as it significantly affects the clarity and readability of on-screen text and images. But, how can the correct DPI setting be found for a given display configuration, and what does the word "correct" mean in this context?

The correct DPI setting is the one that produces images with the correct angular size, which is determined by the size of a CSS pixel. In other words, the correct DPI is the ratio, in percentages, of the display configuration's visual acuity to that of a CSS pixel.

A display configuration is determined by two properties: the display's PPI (pixels per inch) and the viewing distance. To calculate the visual acuity of a display configuration, the following formula can be used: visual acuity = PPI × (viewing distance in inches)

To illustrate this, consider a 24-inch display with a resolution of 1920 × 1080, which corresponds to PPI of 91.8 pixels per inch. If we place this display at a viewing distance of 34 inches (approximately 86 cm), we get a visual acuity of 91.8 × 34, which is approximately 3121 .

To achieve the correct angular size, the display's pixels must be scaled to match the size of a CSS pixel. This scaling factor can be calculated by dividing the visual acuity of the display configuration by the visual acuity of a CSS pixel, yielding: 3121 / 2688 ≈ 116% This scaling factor of 116% (or equivalently, 112 DPI) is the correct DPI setting for a 24-inch 1920 × 1080 display viewed from a distance of 34 inches (approximately 86 cm).

Without this computation, the DPI setting is often a rough estimate based on visual judgment. If the DPI setting is incorrect, fonts and UI elements may appear too large or too small, compromising the user experience. Furthermore, a mismatched DPI setting can cause eye strain, headaches, and other issues, highlighting the importance of properly configuring the display settings.

The Simple Formula for Calculating DPI

To achieve an optimal viewing experience, users should set the DPI setting to approximately match the correct DPI percentage. This value can be calculated using one of two formulas, which differ in the unit of measurement used, either inches or centimeters.

A simplified formula is provided below, which requires only two pieces of information: the display's PPI (pixels per inch) and the viewing distance, where the viewing distance is measured from the eyes to the display.

The formulas are:

1. correct DPI percentage = 0.0146 × PPI × (viewing distance in cm)
2. correct DPI percentage = 0.0372 × PPI × (viewing distance in inches)

For reference, the PPI values for some common display sizes are listed below:

14-inch 1920 × 1080

157.3 PPI

15-inch 1920 × 1080

146.9 PPI

23-inch 1920 × 1080

95.8 PPI

24-inch 1920 × 1080

91.8 PPI

27-inch 1920 × 1080

81.6 PPI

How DPI Relates to Human Vision

When the DPI setting is incorrect, on-screen text and icons will be displayed at an incorrect size. However, most people are sensitive enough to incorrect angular sizes to make the DPI setting a useful approximation of visual acuity.

In this context, the DPI setting is a rough indicator of visual acuity, where the 100% setting corresponds to the visual acuity of a CSS pixel. When the DPI setting is correctly calibrated, it can be used to define three DPI categories:

Low DPI

125% or less

Medium DPI

126% - 174%

High DPI

175% and above

These categories roughly correspond to the acuity of human vision, as follows:

• Low DPI: The display configuration acuity is lower than the acuity of human vision. Subpixel rendering algorithms and anti-aliasing are highly desirable.

• Medium DPI: The display configuration acuity is roughly equivalent to the acuity of human vision. Subpixel rendering algorithms provide a minor benefit. Anti-aliasing is still necessary. A DPI setting of approximately 128% corresponds to the acuity of 20/20 vision.

• High DPI: The display configuration acuity exceeds the acuity of human vision. Subpixel rendering algorithms offer no benefits. Anti-aliasing, although required to prevent artifacts such as moiré, becomes less important.

As of 2025, the majority of display configurations still fall into the low DPI category. Consequently, subpixel rendering algorithms and anti-aliasing remain essential techniques for ensuring good image quality.

Conclusion

Understanding DPI and its relationship to display resolution, viewing distance, and human vision is important for creating a comfortable and effective viewing experience. By using the simple formulas provided in this article, users can calculate the optimal DPI setting and ensure that text and images are displayed at the intended size. Furthermore, recognizing the DPI categories and their implications for display quality can inform users' decisions about enabling subpixel rendering and anti-aliasing.

Correctly configured display DPI is particularly important for application developers, as it allows them to accurately assess the visual appearance of their applications on various user systems, ultimately leading to better-designed and more user-friendly software.