How to Calculate DPI and PPI for Screen Density

How to Calculate DPI and PPI for Screen Density

Screen resolution numbers like 1920 by 1080 tell you how many pixels a display has, but not how sharp it looks. That is where DPI (dots per inch) and PPI (pixels per inch) come in. Understanding pixel density helps you choose the right monitor, design responsive layouts, and prepare images for print.

DPI vs. PPI: what is the difference?

PPI measures digital display density — how many pixels fit in one linear inch of screen. DPI is technically a print term — how many ink dots a printer lays down per inch. In practice, the terms are used interchangeably. For print files, DPI is the correct term — typically 300 DPI for professional printing, 72 for web. The ToolStand DPI and PPI Calculator handles both calculations.

How to calculate PPI

PPI is the diagonal resolution divided by the diagonal screen size in inches. For a 27-inch 4K monitor (3840 by 2160), the diagonal resolution is about 4406 pixels. Divide by 27 inches, and you get about 163 PPI. The DPI Calculator does this math for you — just enter resolution and screen size, and it computes the PPI along with dot pitch in millimeters.

Why pixel density matters

Retina displays. Apple coined "Retina" for screens where individual pixels are indistinguishable at typical viewing distance — roughly 300 PPI for phones held at 10-12 inches. Responsive design. CSS pixels do not map one-to-one on high-PPI screens. A 2x Retina display uses 4 physical pixels for every CSS pixel. Choosing a monitor. A 24-inch 1080p monitor has about 92 PPI — fine for general use. A 32-inch 1080p monitor drops to 69 PPI — text may look blocky.

Pairing with the Aspect Ratio Calculator

The Aspect Ratio Calculator simplifies any resolution to its ratio. It includes presets for YouTube (16:9), Instagram (1:1, 4:5), and TikTok (9:16).

Debunking the 72 DPI for web myth

The rule that images should be 72 DPI for the web is one of the most persistent myths in design. It dates to 1984 when the original Macintosh displayed at exactly 72 PPI. Modern screens vary wildly: a 24-inch 1080p monitor is about 92 PPI, a 27-inch 4K display is 163 PPI, and a flagship phone exceeds 400 PPI. The truth: DPI metadata in an image file has no effect on how it renders on screen. A 1200-pixel-wide image displays at 1200 pixels wide regardless of whether its metadata says 72 DPI, 300 DPI, or 999 DPI. The DPI tag only matters for print — it tells the printer how physically large to render the image. For web, focus on pixel dimensions and file size, not DPI. Use the DPI Calculator to find your display’s actual PPI, and ignore the 72 DPI rule.

DevicePixelRatio and designing for @2x and @3x displays

CSS pixels are not the same as device pixels. On a standard display, 1 CSS pixel = 1 device pixel. On a Retina display, 1 CSS pixel = 2 device pixels (@2x). On premium phones and newer Macs, 1 CSS pixel = 3 device pixels (@3x). The browser property window.devicePixelRatio tells you the ratio. This means a 100 x 100 CSS pixel image needs a 200 x 200 physical pixel image to look sharp on @2x screens, and 300 x 300 on @3x. If you serve only the 100-pixel version on a Retina screen, it gets stretched and appears blurry. Modern responsive design delivers images at 2x or 3x the CSS size using the srcset attribute: <img src="photo.jpg" srcset="photo@2x.jpg 2x, photo@3x.jpg 3x">. Canva and Figma export assets at multiple resolutions for exactly this reason — always export at least @2x for any web project.

Practical PPI thresholds when buying a monitor

Pixel density directly affects visual comfort. Here are the thresholds to know when shopping for a display. Below 90 PPI: individual pixels are visible without squinting; text looks jagged on curved fonts. A 27-inch 1080p display falls here (81 PPI) — fine for gaming but fatiguing for reading. 90–110 PPI: comfortable for general desktop use. A 24-inch 1080p display (92 PPI) or a 27-inch 1440p display (109 PPI) belong here. 110–140 PPI: text looks sharp, with smooth font rendering. A 27-inch 4K display at 163 PPI exceeds this range and enters Retina territory. 140+ PPI: individual pixels are invisible at normal viewing distance. At this density, operating system UI scaling becomes important — macOS and Windows both offer scaling options to keep text readable. Use the DPI Calculator to check any monitor before buying.

Explore all 109 free tools at toolstand.io. Free, forever. No sign-up. No download. Just tools that work.