Display density

DPI vs PPI: the screen-density terms behind physical size.

These terms are often used interchangeably, but they describe different ideas. Understanding the distinction makes browser-based measurement easier to reason about.

PPI: pixels per inch

PPI describes how many physical display pixels fit along one inch of a display dimension. A higher PPI generally means smaller physical pixels. A 4K panel can therefore have a very different physical pixel density depending on its diagonal size.

For a screen with known native pixel dimensions and known physical diagonal size, physical PPI can be computed from the diagonal pixel count divided by the diagonal size in inches.

DPI: dots per inch

DPI historically refers to the density of printed dots, especially in printing and imaging contexts. Display specifications are more precisely described with PPI, although “DPI” is commonly used in everyday device discussions and software settings.

Device pixel ratio is a browser concept

Browsers also expose devicePixelRatio, which describes the relationship between physical device pixels and CSS pixels for the current browsing environment. It is useful runtime information, but it is not the same thing as the physical PPI of the panel.

That distinction is critical for a ruler. The application needs to convert its CSS coordinate system into physical millimeters. Knowing only DPR does not reveal the active display's exact physical dimensions.

Why the difference matters for measurement

Imagine two displays that both expose a similar CSS viewport but have different physical pixel densities or scaling settings. A ruler drawn at the same CSS width can occupy different physical lengths. The browser is doing exactly what the CSS layout asks; the physical display is the variable.

That is why the safest architecture is to treat automatic density detection as an estimate and let physical calibration establish the final scale when actual size matters.

Common mistakes

Mistake 1: assuming 96 CSS PPI means every display is physically 96 PPI. The 96 PPI figure is a CSS reference, not a universal panel specification.

Mistake 2: treating DPR as physical calibration. DPR helps describe the browser's scaling relationship but does not by itself tell you the panel's active physical width.

Mistake 3: mixing browser zoom with hardware density. Browser zoom is a software transformation and can change the effective CSS-to-screen relationship without changing the physical panel.

For the practical fix, continue to Screen Calibration or return to How the ruler works.