Retina Screens & Pixel Density: What Designers Need to Know

What Is a Retina Display?

Apple coined the term Retina display to describe screens with a pixel density high enough that individual pixels are indistinguishable to the human eye at a normal viewing distance.

The threshold varies by device:

• ~300 PPI for phones (held ~25cm away)
• ~220 PPI for tablets (held ~35cm away)
• ~200 PPI for laptops (used ~50cm away)

But Retina is a marketing term — the underlying concept is device pixel ratio (DPR).

---

Device Pixel Ratio (DPR) Explained

DPR is the ratio between physical screen pixels and logical CSS pixels.

DPR	Common Name	PPI Range
1×	Standard	72–110 PPI
1.5×	HD	120–165 PPI
2×	Retina / HiDPI	218–264 PPI
3×	Super Retina	326–460 PPI

On a 2× Retina display, every 1 CSS pixel is rendered using 4 physical pixels (2×2 grid). This is why Retina screens look so sharp — there are twice as many pixels in each dimension.

---

How This Affects Pixel to Inch Conversions

Here’s where it gets important: when you convert pixels to inches, which pixels are you counting?

Logical Pixels (CSS px)

Used in web design and CSS. Always treated as if the screen is 96 PPI regardless of actual hardware density.

width: 200px; /* 200 logical pixels */

On a 2× Retina screen, this renders as 400 physical pixels — but appears the same physical size as on a standard screen.

Physical Pixels

The actual hardware pixels. A 2× MacBook Pro has ~254 PPI physically, but CSS sees it as ~127 logical PPI.

For our calculator: enter the physical pixel count and the actual device PPI to get true physical dimensions. For CSS/web work, use 96 PPI (logical standard).

---

How to Design for Retina

Export at 2× (or 3×)

Design in logical pixels, export assets at 2× for Retina support:

Target	1×	2×	3×
App icon 60pt	60px	120px	180px
Tab bar icon 25pt	25px	50px	75px
Hero image 800pt	800px	1600px	2400px

Use SVG Where Possible

SVGs are resolution-independent — they look crisp on every screen density without multiple exports.

Provide srcset for Raster Images

<img
  src="hero-800.jpg"
  srcset="hero-800.jpg 1x, hero-1600.jpg 2x, hero-2400.jpg 3x"
  alt="Hero image"
/>

---

Common Device PPIs at a Glance

Device	PPI	DPR
iPhone 16 Pro	460	3×
iPhone 16	460	3×
Samsung Galaxy S24 Ultra	505	~3.5×
iPad Pro 12.9” (M4)	264	2×
MacBook Pro 14” (M3)	254	2×
MacBook Air 13” (M3)	224	2×
Apple Studio Display	218	2×
27” 4K monitor	163	~1.7×
24” 1080p monitor	92	1×

---

The Practical Takeaway

For web and app design: work in logical pixels at 96 PPI, export assets at 2× or 3×, and use SVG for icons and illustrations.

For print: Retina doesn’t apply — use 300 DPI physical pixels and our pixel to inch calculator to verify canvas size.

For checking exact PPI: find your device in our Device PPI Reference Guide or enter a custom PPI in the calculator.