96DPI

96dpi, short for 96 dots per inch, is a density measure used in display technology and typography. In many web and CSS contexts, 96 dpi is treated as the CSS reference density, shaping how physical measurements map to on-screen units.

In CSS, an inch is defined as 96 CSS pixels, regardless of the device’s actual pixel density. This means 1 inch equals 96 CSS pixels, and 1 centimeter is about 37.8 CSS pixels. The real device may render multiple device pixels for each CSS pixel if the display has a higher pixel density.

Device pixel ratio and mapping to device pixels play a central role. The devicePixelRatio value indicates how many device pixels correspond to a single CSS pixel. For example, a display with DPR of 2 uses about 192 device pixels per CSS inch. This mechanism lets web content maintain consistent layout while delivering crisper visuals on high-density screens.

History and usage: The 96dpi standard originates from early computing and web design, where many displays were near 96 PPI. CSS adopted this as a stable reference to ensure predictable layouts across systems. Today, actual device PPI varies widely, from around 100 PPI on some laptops to well over 300 PPI on modern smartphones.

Practical considerations: 96dpi is a convention rather than a property of a specific device. Web designers should account for devicePixelRatio and high-density displays by using scalable graphics (such as SVGs) and responsive images, rather than relying on fixed device pixels. The concept remains fundamental for understanding how CSS units relate to physical measurements.