Screen PPI, DPI, and device pixel ratio
Last reviewed on 2026-04-23.
"PPI," "DPI," and "device pixel ratio" come up whenever anybody talks about measuring on a screen. They sound interchangeable, they are routinely mixed up, and they each mean something different. This page sorts them out and explains why they matter when you're trying to draw an accurate ruler in a browser.
PPI — pixels per inch
PPI is a property of a physical display. It's the number of native hardware pixels packed into one inch of screen. A modern 15.6" laptop with a 1920 × 1080 panel works out to about 141 PPI. A 27" 4K monitor (3840 × 2160) is about 163 PPI. A late-model iPhone is well above 400 PPI. A cheap budget monitor might be under 100 PPI.
PPI is computed from three values: the number of pixels along the diagonal (from the width and height via the Pythagorean theorem) divided by the diagonal length in inches. It is fixed for a given panel — you can't change it by adjusting settings.
DPI — dots per inch
DPI is a printing and operating-system term that historically described how many ink dots a printer lays down per inch of paper. On a screen context it's a loose synonym for PPI, but it's more often used to mean "logical DPI" — the value the operating system uses when deciding how large to draw text and UI.
Windows exposes "Scale and layout," macOS exposes "Scaled resolution," and each effectively scales a notional 96-DPI layout up or down to make the UI comfortable on a given physical display. That's why a "12 pt" font on Windows at 125% scaling ends up bigger on screen than "12 pt" at 100%, even though the physical PPI of the monitor hasn't changed.
Device pixel ratio
In a web browser, device pixel ratio (DPR, exposed as
window.devicePixelRatio) tells you how many physical pixels correspond to a
single CSS pixel on the current device. A standard desktop monitor at 100% OS scaling
generally reports a DPR of 1. A "Retina" laptop reports 2. Phones commonly report 2 or 3. A
Windows laptop at 150% OS scaling typically reports 1.5.
DPR is the web platform's way of saying, "the user has asked for a UI this much bigger than the 1:1 pixel baseline — draw accordingly." Without DPR, high-density screens would show UIs so small they'd be unusable.
CSS pixels aren't physical pixels
When a web page says width: 96px, that number is in CSS pixels. The CSS Object
Model specification originally reasoned that 1 CSS inch should equal 96 CSS pixels, and that
CSS units should be physically meaningful on a typical desktop monitor of the time.
In practice, the relationship between CSS pixels and physical distance drifted. On a high-PPI phone, 96 CSS pixels is not one physical inch; it's whatever the browser has chosen so that a typical UI built against the 96-px-per-inch assumption still looks comfortable at arm's length. The official CSS spec now describes this as a "reference pixel" designed for comfortable viewing rather than as a guaranteed physical inch.
Why this matters for a ruler
An on-screen ruler has to decide how many CSS pixels to draw per inch. If it naively uses 96 px/in, it will be visibly wrong on any high-PPI device, any scaled display, or any browser zoom other than 100%. The fix is calibration: measure one known real-world length against the screen once, compute the right pixels-per-inch value, and store it.
That's exactly what the calibration process does. After calibration, the ruler knows the correct CSS-pixels-per-inch for your specific combination of hardware, OS scaling, and browser zoom.
Typical PPI ranges
| Device class | Typical native PPI | Notes |
|---|---|---|
| Budget desktop monitor (24", 1920×1080) | ~92 PPI | Close to the old 96-DPI assumption |
| Mainstream monitor (27", 1440p) | ~109 PPI | |
| 4K monitor (27", 3840×2160) | ~163 PPI | OS scaling usually applied at 150–175% |
| Standard 15.6" laptop (1080p) | ~141 PPI | |
| MacBook Air 13.3" (Retina) | ~227 PPI | DPR reported as 2 |
| MacBook Pro 14" | ~254 PPI | DPR reported as 2 |
| iPad Pro 11" | ~264 PPI | DPR reported as 2 |
| Typical modern phone | ~400–460 PPI | DPR often 3 |
What changes calibration
Because CSS-pixels-per-inch depends on more than just the hardware, recalibrate after any of:
- A browser zoom change (Ctrl/⌘ + or − from 100%).
- A change to OS display scaling (Windows "Scale," macOS "Scaled resolution").
- Plugging in a different external monitor.
- Moving the window to a screen with a different PPI.
- Switching between a regular browser tab and the installed PWA.
Some commonly asked follow-ups
Why does a "4K" monitor have such different PPI depending on size?
"4K" refers to the pixel count (~3840 × 2160), not to the physical size. A 27" 4K monitor packs those pixels into a smaller area than a 43" 4K TV, so the 27" monitor has a much higher PPI. PPI is always a function of both resolution and physical size.
Why does my phone report CSS pixels as if it were a low-density screen?
It doesn't — it reports a DPR greater than 1. A 400-PPI phone typically reports around 160 CSS PPI together with a DPR of around 2.5–3, so that standard websites render at a comfortable UI size while images and canvas content can still use the extra hardware resolution.
Can I just read PPI out of window.screen?
No. Web APIs expose resolution, viewport dimensions, and DPR, but not the physical screen dimensions in inches or millimeters. That's the whole reason on-screen rulers need a calibration step involving a known physical reference.
Related reading
- How to calibrate an online ruler — applying these ideas in practice.
- How accurate is an on-screen ruler?
- Inch ↔ centimeter, millimeter ↔ inch — unit conversion tables.
- The ruler itself.