What Is PPI and Why Does It Matter for Screens?

What Is PPI?

PPI stands for pixels per inch. It measures how densely packed the physical pixels are on a display panel — specifically, how many individual light-emitting dots fit inside a single linear inch of screen. The higher the number, the more pixels are squeezed into the same space, and the sharper and more detailed the image appears.

You have probably encountered this concept without realising it. When Apple launched the iPhone 4 in 2010, they coined the term "Retina display" and claimed the pixel density was high enough that the human eye could not distinguish individual pixels at a normal viewing distance. The iPhone 4 had 326 PPI. At the time, most phone screens were around 160–180 PPI, and the difference was immediately visible — text looked printed rather than pixelated, and icons had a crispness that felt genuinely new.

Today, flagship smartphones routinely exceed 400 PPI, and some reach 525 PPI. Meanwhile, a typical desktop monitor sits at 90–110 PPI. That enormous gap is not a flaw — it is intentional, and understanding why requires thinking about how far away you hold each device.

How PPI Is Calculated

PPI is derived from three numbers: the horizontal pixel count, the vertical pixel count, and the physical diagonal size of the screen in inches. The formula uses the Pythagorean theorem to find the diagonal pixel count, then divides by the screen size:

PPI = √(horizontal_pixels² + vertical_pixels²) / screen_size_inches

Example — iPhone 16 Pro (6.3-inch, 1320 × 2868 px):
  diagonal_pixels = √(1320² + 2868²) = √(1742400 + 8225424) = √9967824 ≈ 3157
  PPI = 3157 / 6.3 ≈ 460 PPI

Let us work through a monitor example to see why the numbers are so different. A 27-inch 1440p monitor has a resolution of 2560 × 1440 pixels:

diagonal_pixels = √(2560² + 1440²) = √(6553600 + 2073600) = √8627200 ≈ 2937
PPI = 2937 / 27 ≈ 109 PPI

Same formula, very different result. The monitor has fewer pixels packed into a much larger physical area, so the density is far lower. Whether that matters depends entirely on how far away you sit from it — which we will cover shortly.

PPI vs DPI: Not the Same Thing

These two terms are frequently confused, and the confusion is understandable because they measure similar things in different contexts.

PPI (pixels per inch) refers exclusively to digital displays. It describes the density of the physical light-emitting pixels on a screen panel. It is a fixed hardware property — you cannot change the PPI of a screen without replacing the panel.

DPI (dots per inch) originated in print. It describes how many ink dots a printer places per inch of paper. A 600 DPI printer lays down 600 dots per inch, producing finer detail than a 300 DPI printer. Unlike PPI, DPI is a variable setting — you can print the same image at 72 DPI (low quality, small file) or 300 DPI (print quality, larger file).

The confusion arises because operating systems and graphics software often use "DPI" loosely to mean display density. Windows calls its display scaling setting "DPI scaling." macOS refers to Retina displays as "high-DPI." In these contexts, the word DPI is being used as a synonym for PPI — they mean the same thing when talking about screens. When talking about printing or image export, the distinction matters.

PPI Across Device Categories

We analysed the 185 devices in the DeviceSpecsHub database and the variation in PPI across categories is striking. The data tells a clear story about how manufacturers balance screen size, resolution, and the expected viewing distance for each type of device.

Smartphones lead the pack with an average of 458 PPI. The highest-density phones in the database — the OnePlus 11, OnePlus 10 Pro, Realme GT 5 Pro, and several others — all reach 525 PPI. That is roughly five times the pixel density of a typical desktop monitor.

Smartwatches are surprisingly high at an average of 390 PPI. This makes sense: watch faces are tiny (typically 40–45mm diagonal) and held very close to the eye, so manufacturers need extreme density to keep text and icons legible. The Apple Watch Ultra 2 reaches 466 PPI on its 49mm display.

Monitors sit at the low end with an average of 122 PPI. The ViewSonic VP2468a, a 24-inch 1080p monitor, has just 94 PPI — the lowest in the database. That sounds bad until you consider that it is designed to be used at arm's length, roughly 60–70 cm away, where 94 PPI is perfectly adequate for most work.

Viewing Distance Changes Everything

The reason monitors can get away with 100 PPI while phones need 400+ PPI is entirely about viewing distance. The further away you hold a screen, the smaller each pixel appears to your eye, and the less density you need to make the image look smooth.

Vision scientists use a concept called angular resolution — the smallest angle between two points that the human eye can distinguish. For a person with 20/20 vision, this is approximately 1 arcminute (1/60th of a degree). You can use this to calculate the "retina threshold" — the PPI at which individual pixels become invisible at a given distance:

Retina threshold PPI = 3438 / viewing_distance_in_inches

Smartphone (held at ~12 inches):  3438 / 12 ≈ 287 PPI
Tablet (held at ~18 inches):       3438 / 18 ≈ 191 PPI
Laptop (used at ~24 inches):       3438 / 24 ≈ 143 PPI
Desktop monitor (at ~30 inches):   3438 / 30 ≈ 115 PPI
TV (viewed at ~120 inches):        3438 / 120 ≈ 29 PPI

This explains why a 55-inch 4K TV at 80 PPI looks perfectly sharp from across the room, while a 24-inch monitor at 94 PPI looks fine at a desk but would look noticeably pixelated if you held it 12 inches from your face. The absolute PPI number only matters relative to how close you are to the screen.

PPI and CSS: What Developers Need to Know

Here is where PPI becomes directly relevant to web development. CSS does not work in physical pixels — it works in CSS pixels, which are an abstract unit defined by the browser. The relationship between CSS pixels and physical pixels is determined by the Device Pixel Ratio (DPR).

On a device with DPR 3 (like most modern iPhones), every 1 CSS pixel is rendered using a 3×3 grid of physical pixels — 9 physical pixels per CSS pixel. This is how a phone with 1320 × 2868 physical pixels presents itself to CSS as a 440 × 956 viewport. The browser handles the mapping automatically; your CSS just works in the logical CSS pixel space.

Where PPI becomes actionable for developers is in image sharpness. If you serve a 200×200 pixel image on a DPR 3 device, the browser stretches it across 600×600 physical pixels. The result looks blurry because the image does not have enough data to fill all those physical pixels. The fix is to serve a 600×600 image and let the browser scale it down in CSS:

<!-- Serve 3x the CSS dimensions for DPR 3 screens -->
<img
  src="logo-200.png"
  srcset="logo-200.png 1x, logo-400.png 2x, logo-600.png 3x"
  width="200"
  height="200"
  alt="Logo"
/>

For background images in CSS, use the image-set() function (now supported in all modern browsers without a prefix):

.hero {
  background-image: image-set(
    url("hero-1x.jpg") 1x,
    url("hero-2x.jpg") 2x,
    url("hero-3x.jpg") 3x
  );
}

You can also detect DPR in CSS media queries to apply different styles for high-density screens. This is useful for things like adjusting border widths or shadow sizes that look different at high DPR:

/* Target screens with DPR 2 or higher */
@media (-webkit-min-device-pixel-ratio: 2),
       (min-resolution: 192dpi) {
  .logo {
    background-image: url("[email protected]");
    background-size: 100px 40px; /* CSS dimensions */
  }
}

Retina and High-DPI Displays

"Retina" is Apple's marketing term for displays where the pixel density is high enough that individual pixels are not visible at the device's intended viewing distance. It is not a technical specification — Apple decides which products earn the label. In practice, Retina displays typically have a DPR of 2 or higher.

Other manufacturers use different terms for the same concept: Samsung calls theirs "Super AMOLED" or "Dynamic AMOLED," Google uses "Smooth Display," and OnePlus uses "Fluid AMOLED." The underlying idea is the same — a high-density panel with a DPR greater than 1.

DPR Values in the Wild

Looking at the DeviceSpecsHub database, DPR values cluster around a few common values depending on device category:

It is worth noting that DPR and PPI are related but not the same thing. DPR is a ratio defined by the operating system — it tells the browser how many physical pixels to use per CSS pixel. PPI is a physical measurement of the panel. A manufacturer could theoretically set any DPR they want regardless of the actual PPI, though in practice they choose DPR values that make the CSS pixel size feel consistent across devices (approximately 160 CSS pixels per inch, a legacy from the original iPhone).

How Much PPI Do You Actually Need?

The honest answer is: it depends on what you are buying and how you will use it.

For Smartphones

Anything above 300 PPI is effectively indistinguishable from higher densities for most people at normal phone-holding distances. The jump from 160 PPI (old budget phones) to 300 PPI is dramatic and clearly visible. The jump from 400 PPI to 525 PPI is barely perceptible in everyday use, though it can make a difference for very fine text and sub-pixel rendering. If you are buying a phone, do not pay a premium specifically for PPI above 400 — spend that money on battery life, camera, or processor instead.

For Monitors

At a typical desk viewing distance of 60–70 cm, 110 PPI is the approximate retina threshold. Most 27-inch 1440p monitors hit 109 PPI — right at that boundary. A 4K 27-inch monitor delivers 163 PPI, which is noticeably sharper for text and fine UI work, and is worth considering if you do a lot of reading, coding, or design work. Going above 163 PPI on a monitor at normal desk distance provides diminishing returns.

For Laptops

Laptop screens are used at roughly 45–55 cm, so the retina threshold is around 150–175 PPI. Most 13–14 inch laptops with 1440p or 2560×1600 panels land in the 220–260 PPI range, which is comfortably above the threshold. MacBook Pros with their Liquid Retina XDR panels reach 254 PPI. For laptops, anything above 200 PPI will look sharp; focus on panel quality (brightness, colour accuracy, refresh rate) over raw PPI numbers.

Checking Your Device PPI

There are several ways to find the PPI of a device you own or are considering buying.

Look It Up in the DeviceSpecsHub Database

The DeviceSpecsHub database lists the screen density (PPI) for all 185 devices alongside the physical resolution, CSS viewport size, DPR, and screen size. You can search by name or filter by category to find any device. Each device detail page shows the full display specification in one place.

Calculate It Yourself

If you know the resolution and screen size, use the formula above. Most manufacturer spec pages list the resolution and diagonal screen size. Plug them into the formula and you have the exact PPI.

Check via JavaScript

For the device you are currently using, you can get the DPR (not PPI directly) from JavaScript. Combined with the screen resolution, you can estimate PPI if you know the physical screen size:

// Get device pixel ratio
const dpr = window.devicePixelRatio; // e.g. 3

// Get CSS viewport dimensions
const cssWidth = window.innerWidth;   // e.g. 393
const cssHeight = window.innerHeight; // e.g. 852

// Physical pixel dimensions
const physWidth = cssWidth * dpr;   // 1179
const physHeight = cssHeight * dpr; // 2556

// If you know the screen size (e.g. 6.1 inches for iPhone 16):
const screenInches = 6.1;
const ppi = Math.sqrt(physWidth**2 + physHeight**2) / screenInches;
console.log('Estimated PPI:', Math.round(ppi)); // ~460

Note that window.innerHeight excludes the browser chrome (address bar, tab bar), so this gives an approximation rather than the exact panel PPI. For the precise value, look up the device in the database.

Practical Takeaways

PPI is one of those concepts that seems technical but has very practical implications once you understand it. Here is a summary of the most useful points:

The core insight is that PPI only makes sense in context. A 94 PPI monitor is not "bad" — it is designed for a viewing distance where 94 PPI is perfectly sharp. A 525 PPI phone is not "overkill" — it is designed for a viewing distance where 525 PPI is necessary to make text look printed rather than pixelated. Always think about PPI relative to how far away the screen will be from the viewer's eyes.

For web developers, the practical takeaway is simpler: always serve images at the right resolution for the device's DPR, use the srcset attribute for raster images, and prefer SVG for icons and logos wherever possible — SVGs are resolution-independent and look perfectly sharp at any PPI.