How to Calculate Screen PPI (Pixels Per Inch)

What PPI means

PPI (pixels per inch) is the number of physical pixels a display packs into one inch of its surface. A higher PPI means smaller pixels, so the same image drawn with the same number of pixels looks physically smaller.

PPI is not printed on most spec sheets, but two numbers that are printed determine it: the native resolution (width and height in pixels) and the diagonal size in inches.

The formula

Because pixels on modern displays are square, the pixel grid and the physical panel share the same aspect ratio. That lets you compute the diagonal in pixels with the Pythagorean theorem and divide by the diagonal in inches:

PPI = sqrt(width_px² + height_px²) / diagonal_inches

The width and height must be the panel's native resolution in device pixels, not the "scaled" or "looks like" resolution shown in operating system settings. The diagonal is the size the manufacturer advertises, such as 24, 13.3, or 6.1 inches. If the diagonal is listed in centimeters, the unit converter turns it into inches before you divide.

Three worked examples

The steps for the monitor:

1. Square the sides: 1920² = 3,686,400 and 1080² = 1,166,400.
2. Add them: 4,852,800.
3. Take the square root: 2202.9 pixels along the diagonal.
4. Divide by 24 inches: 91.8 PPI.

The laptop follows the same path: 2560² + 1600² = 9,113,600, whose square root is 3018.9, and 3018.9 / 13.3 = 227 PPI. For the phone, 1170² + 2532² = 7,779,924, the square root is 2789.3, and 2789.3 / 6.1 = 457 PPI.

PPI vs DPI vs DPR

The three abbreviations are often mixed up, and only one of them describes your display.

• PPI is a property of the screen: physical pixels per inch of glass.
• DPI (dots per inch) properly describes printers and scanners. The "72 dpi" or "300 dpi" tag in an image file is only a printing hint; it does not change how large the image appears on a screen.
• DPR (device pixel ratio) is window.devicePixelRatio in the browser: how many device pixels cover one CSS pixel. It is set by operating system scaling and multiplied by browser zoom. A DPR of 2 means each CSS pixel is a 2 × 2 block of device pixels.

Why PPI alone is not enough in a browser

A web page never draws in device pixels. It draws in CSS pixels, and the CSS specification defines one inch as exactly 96 CSS pixels regardless of the screen. That figure is a layout convention, not a measurement, so a box set to width: 1in is only a real inch on a display whose CSS pixel density happens to be 96 per inch.

To draw a real inch, an actual-size ruler needs the number of CSS pixels that span one physical inch on your screen:

CSS px per inch = PPI / DPR

Using the table above:

On the laptop, a ruler that assumed the 96-pixel convention would draw an inch as 96 CSS pixels, which covers 96 / 113.5 = 0.85 of a real inch. On the monitor it would draw an inch about 4.6% too long. Both errors are obvious the moment you hold a physical object against the screen.

How the ruler's diagonal calibration uses PPI

The screen ruler offers a diagonal calibration for exactly this reason. When you enter your display's diagonal in inches, the ruler reads screen.width and screen.height, computes the screen diagonal in CSS pixels, and divides by your diagonal to get CSS pixels per inch directly. Dividing that by 25.4 gives CSS pixels per millimeter, which is the single number every tick mark depends on.

The ruler also records devicePixelRatio at the moment you calibrate. If the value later differs, for example because you changed browser zoom, it warns you that the stored figure no longer matches the screen. The methodology page walks through the arithmetic in detail.

Diagonal calibration is only as good as the diagonal you type. A 23.8-inch panel sold as "24-inch" introduces a 0.8% scale error before you start.

The card method when you have no reliable screen specification

Use a bank card only when you know it follows ISO/IEC 7810 ID-1 (85.60 × 53.98 mm). In calibration, choose horizontal or vertical placement and either the long or short edge. Align the fixed circle first, then move the diamond with drag, slider, or +/− controls; fine adjustments use 0.5 CSS px.

The card formula obtains CSS pixels per inch directly:

CSS PPI = reference CSS pixels × 25.4 / reference millimeters

The long edge usually reduces relative endpoint error, while the short edge can fit a narrow viewport. If neither full outline fits, use the edge-only view, rotate the card or screen, or use screen-size calibration. Save at the intended browser zoom, then check the ruler with a physical reference. A saved mapping is not automatically a verified physical measurement.