PPI vs. DPI: What's the Difference, and Why Your Screen Can't Measure Itself

The digital design and development world suffers from a severe, everyday misunderstanding of units — specifically, treating PPI and DPI as interchangeable. Although we use them that way constantly, they refer to very different physical realities. Whether you're designing for the web or producing a physical printed asset, the distinction matters: get it wrong and you end up with blurry web assets, broken scaling in UI work, or print jobs that come out at the wrong physical size.

PPI (pixels per inch) describes the density of light-emitting hardware in an actual computer monitor. DPI (dots per inch) describes the number of distinct points a mechanical output device — a printer — can place per physical inch on paper. They're measuring two different things, on two different kinds of hardware.

PPI (Pixels Per Inch)

Pixels are the physical density of dots displayed on a digital screen — by definition, each one is made up of red, green, and blue light elements displaying information simultaneously.

PPI is fixed by the physical hardware. For example, a 27-inch monitor at 4K (3840 × 2160 pixels) works out to roughly 163 PPI. Nothing about that changes through software.

A digital file has no inherent physical size of its own — that's entirely contingent on the hardware displaying it. Build a 1000 × 1000px canvas, and if you display it on a 100 PPI screen, it renders at 10 inches square. Drag that same file onto a 500 PPI smartphone, and it becomes a 2-inch square — still 1000 × 1000px, no scaling applied, just a different physical size because the hardware is different.

DPI (Dots Per Inch)

DPI is a value tied to physical printing and scanning. Printers spray physical dots of color (cyan, magenta, yellow, and key/black — CMYK) onto paper at a given density. Since that's four colors instead of the three RGB lights a screen uses, a printer needs far more dots per square inch to simulate the equivalent of one pixel's color.

DPI has to run much higher than a file's PPI. Most professional print work targets 300 DPI, and printers themselves are often capable of significantly higher output resolution.

The "72 DPI for Web" Myth

For years, designers exported web assets at 72 DPI. That convention traces back to the original 1984 Macintosh, whose 72 PPI display made a pixel and a printer's point roughly equivalent. But modern displays commonly measure 100+ PPI at 1080p, and well over 450 PPI on phones — which makes a 72 DPI file attribute completely meaningless for web content. You can't represent an inch through image metadata; the only thing that actually matters for on-screen rendering is the absolute pixel dimensions of the image, and DPI metadata never changes that.

Screen Measurement Is Broken by Default for the Web

Hold a physical ruler up to your monitor and try to verify an element styled with width: 1in in CSS — it won't match. Writing 1in assumes the browser knows your monitor's actual PPI and calculates the matching pixel count. It doesn't, and historically never has: W3C CSS guidelines define 1 inch as exactly 96 pixels, full stop, regardless of your actual display.

If your screen measures 144 PPI, that "1 inch" CSS rule renders smaller than a real inch. On a lower-PPI screen, it renders larger.

OS-level display scaling compounds this further. A 144 PPI screen with scaling set to 150% will render your "1 CSS inch" smaller still, because the browser is mapping 1 logical CSS pixel to a 2×2 block of physical hardware pixels to keep everything legible at that density.

How to Actually Measure Screens Correctly

A few practical rules follow directly from all of this:

• Never rely on in, cm, or mm in a stylesheet for anything that needs to be physically accurate. Use px, relative units, or the device pixel ratio instead.
• Don't bother setting DPI metadata on exported web images. That header value plays no role in how a browser renders the file.
• Export at 2× the final dimension for high-density screens. That's what guarantees sharp rendering on any high-DPI display, since the browser maps each CSS pixel to a 2×2 block of physical pixels.
• Export at 300 PPI for commercial print work — that's the standard target file resolution for professional printing.
• Never assume physical size is measurable on screen without the user's help. There's no shortcut around this: build a calibration step into your software. Show the user a reference object — a credit card, a sheet of paper — let them match it against an on-screen shape, and use that to calibrate against their device's actual pixel ratio.

That last point is the entire reason Screen Ruler exists as a calibration-first tool rather than a fixed-DPI one. No browser can tell you your screen's true PPI — the only trustworthy number is the one you get by checking against something physically real.