Screen DPI Explained: Why Your Monitor Lies About Inches

If you have ever drawn a "1-inch line" on screen and noticed it did not match a real inch, you have hit one of the web quirkiest specifications. Every screen lies about real-world units, and understanding why explains why our online ruler needs calibration.

The 96 DPI Lie

CSS, the language that styles every web page, defines 1 inch = 96 pixels. Always. On every device. Forever.

This is a fiction the web inherited from old Windows displays in the 1990s, which really did show 96 pixels per inch. Modern screens have wildly different pixel densities, but the CSS specification kept the 96 number for compatibility. Result: when a web page tells your browser "draw a 96-pixel line," your browser does, but those 96 pixels are physically much smaller on a high-DPI screen than on an old monitor.

DPI vs PPI vs CSS Pixels

Three terms get mixed up constantly:

• DPI (Dots Per Inch): originally a printing term. How many ink dots per physical inch a printer produces.
• PPI (Pixels Per Inch): how many physical pixels per inch your screen actually has. iPhone 15 Pro has about 460 PPI. A 24-inch 1080p monitor has about 92 PPI. A 4K 27-inch monitor has about 163 PPI.
• CSS Pixels: a logical unit. 1 CSS px = 1/96 of a CSS inch. On modern devices, one CSS pixel is usually 2 or 3 physical pixels (this multiplier is called devicePixelRatio).

Device Pixel Ratio (DPR)

Most modern phones and laptops use a DPR of 2 or 3, meaning one CSS pixel covers 2 by 2 or 3 by 3 physical pixels. This is why everything looks sharp on Retina and HiDPI screens. The browser uses extra physical pixels to render each CSS pixel.

You can see your screen PPI and DPR live in our actual size ruler page (it shows them in the "Your Screen Info" box).

Common Screen PPI Values (Reference)

Why Online Rulers Must Be Calibrated

If a website draws a ruler tick at 96 CSS pixels and calls it "1 inch," that tick will be a real inch only on a 96 PPI monitor, essentially extinct hardware today. On every modern device the rendered tick will be either too small (laptops, phones) or too large (very old monitors).

The fix is calibration: ask the user to match an on-screen reference (typically a credit card at 85.6 mm) to a real one, then save the resulting pixels-per-centimeter ratio in localStorage. Every subsequent measurement uses the calibrated ratio instead of the 96 DPI default. Our online ruler uses this exact approach.

How to Check Your Own Screen PPI

1. Find your screen resolution in display settings (for example, 2560 by 1440).
2. Measure your screen diagonal in inches.
3. Use Pythagoras: diagonal pixels = square root of (width² + height²)
4. PPI = diagonal pixels divided by diagonal inches

Or, easier: visit our actual size ruler page. It auto-detects your screen reported resolution and DPR.

Browser Zoom Affects Everything

If you press Ctrl-+ or Cmd-+ to zoom in, the browser scales CSS pixels by the zoom factor. A 100-pixel line at 125% zoom is rendered as 125 physical CSS pixels. For any calibrated ruler to be accurate, your browser zoom must be at 100%. Check with Ctrl-0 or Cmd-0 to reset.

Print CSS: The Other Half of the Lie

When you print a web page, CSS actually uses real inches via the @page rule. The printer driver knows your paper size and prints at true physical dimensions. So printing a 1-inch line really does produce a 1-inch line on paper. The screen lie only exists on screens.

Summary

• CSS says 1 inch equals 96 pixels, but this is a fiction.
• Real screens range from 90 PPI (old monitors) to 460+ PPI (modern phones).
• A "1-inch line" drawn in HTML will be a different physical size on every device.
• The only way to get accurate on-screen measurements is to calibrate the ruler against a known physical object (like a credit card).
• Always measure at 100% browser zoom.