DPI vs PPI vs pixel density: a working guide for designers

Three numbers, three meanings:

• DPI (dots per inch) — how many ink dots a printer places per linear inch. A hardware property of the printer.
• PPI (pixels per inch) — how many image pixels print or display per linear inch at the target size. A property of how the image is rendered.
• Pixel density — the device pixels per CSS pixel on a display. A property of the screen (Retina, 4K, etc.).

Almost every design tool labels its “resolution” field as DPI when it actually means PPI. The misuse is so ingrained that the rule of thumb is: when a designer says DPI, assume they mean PPI unless they’re literally talking about a physical printer’s rated output.

What each number actually tells you

DPI (printer or scanner)

Modern inkjets run 1200-4800 DPI. Laser printers run 600-2400 DPI. Both numbers describe how finely the hardware can place ink dots, not how much image detail a page can hold. A 4800 DPI printer can’t print a 4800 PPI image — typical effective image resolution (PPI) tops out around 300-400 even on the best inkjets, because rendering one image pixel requires multiple ink dots (halftone screening).

PPI (the image-meets-target-size number)

PPI describes an image only when you specify a target physical size. A 3000×2000-pixel image printed at 10×6.67 inches is 300 PPI. Printed at 5×3.33 inches it’s 600 PPI. Printed at 20×13.33 inches it’s 150 PPI. Same file, three different PPI values.

Standard rules for what PPI you need:

• 72-96 PPI — web display. Browsers ignore the embedded PPI; only pixel count matters.
• 150 PPI — newspaper print, large-format poster viewed from distance.
• 300 PPI — book, magazine, photo print viewed at arm’s length.
• 600+ PPI — line art, technical drawings, fine typography.

Pixel density (the Retina number)

On modern screens, “1 pixel” in CSS isn’t one screen pixel. iPhones, MacBook Pros, and most modern Android phones use a devicePixelRatio of 2 or 3 — meaning one CSS pixel maps to 2× or 3× the physical pixels. This is why a designer working in Figma at 1× produces images that look soft on a phone unless they export at 2× or 3× resolution.

Concrete numbers: a 2020 iPhone has a CSS-pixel resolution of 390×844 but a physical resolution of 1170×2532 (3× DPR). Designers need to know both. The DPI of the physical screen is a separate number again (~460 PPI for that phone), but in CSS terms what matters is the device pixel ratio.

Practical numbers for common deliverables

Where the confusion bites

1. The “72 DPI” export problem

A designer builds in Figma/Sketch at “72 DPI” (which is meaningless on screen but is what the tool displays), exports a PDF, and sends it to a press. The press receives a file that asserts 72 PPI in its metadata; the rendered output is 1/4 the intended density, and the print looks pixelated. Fix: re-export at 300 PPI andensure the pixel count is enough to support that density.

2. Retina @1× exports

A designer working in Figma at 1× exports an icon at exactly the CSS dimensions (e.g. 24×24 px). On a 3× device the icon renders blurry because the browser’s upscale isn’t as sharp as a native 72×72 export. Fix: export @1× plus @2× and @3× variants, then use HTML srcset orimage-set in CSS to serve the right file.

3. Confusing source PPI with target PPI

A photographer shoots a 6000×4000 raw image. The camera embeds 300 PPI metadata. The photographer drops this into a 600×400 web layout. The image is 10× more pixel data than the layout needs; the source PPI metadata is irrelevant. Fix: downsize to the target pixel dimensions (or 2× them for Retina) using a real downsampling algorithm — our image resize tool handles this.

Quick reference: when each number matters

• Web work: only pixel count + DPR matter. Ignore embedded PPI metadata.
• Print work: PPI matters absolutely. Match it to the print’s viewing distance (300 PPI for hand-held, 150 PPI for hung-on-wall, lower for distant).
• Photography archive: keep the original full-resolution source. Generate downscaled variants for each downstream use.
• UI design: design at 1× CSS dimensions, export at 2× and 3×.

For the deeper one-page comparison, see our DPI vs PPI comparison. For the colour-conversion side of design, the colour methodology page covers RGB vs CMYK and ICC profiles.

Sources: Adobe’s Print Production Reference (2023), W3C HTML Living Standard (image source set), Apple Human Interface Guidelines on Layout.