What is PPI and how to use it in interface design

You'll see “PPI” on every spec sheet, but here's the thing most tutorials skip: for 90% of your layout work, pixel density doesn't change what you build.

When PPI actually matters

Your CSS doesn't care about PPI. You write width: 375px and the browser figures out how many physical pixels to paint. That abstraction is called “CSS pixels” or “device-independent pixels.”

But there are two situations where PPI becomes critical:

• Touch targets on extreme screens. A 44px button feels tiny on a 27-inch 5K display but massive on a low-density tablet. If you're designing for unusual hardware, check the physical dimensions—not just the CSS pixels.
• Image sharpness. High-PPI screens (3x, 4x) need larger source images or they look soft. This is why you export @2x and @3x assets from Figma.

A practical example

Take a MacBook Pro 14” with a 3024×1964 resolution at 254 PPI. The browser reports a viewport around 1512×982 CSS pixels (at 200% scaling). Your layout code uses those CSS values, not the physical pixel count.

The high PPI just means text and icons look sharper—you don't need to change your grid or breakpoints to accommodate it.

The bottom line

Design your layouts in CSS pixels. Use PPI only when you need to verify physical sizes (for touch accessibility) or decide image resolution (for sharpness). The PPI calculator handles both of those cases.