Screen Resolution, Pixel Density, and the Numbers Marketing Uses

A diagonal is not a size

Screens are sold by their diagonal, and by an old convention that survived the move from cathode-ray tubes to flat panels, that diagonal is quoted in inches everywhere in the world. A 27-inch monitor is a 27-inch monitor in Lisbon and in Lagos. What the number does not tell you is how much screen you are getting, because a diagonal is one measurement of a two-dimensional object and you need the aspect ratio to recover the other two.

The recovery is Pythagoras and nothing more. If the ratio is a to b, then a panel of width a·k and height b·k has a diagonal of k times the square root of a squared plus b squared. Solve for k and you get k equal to the diagonal divided by that square root, so the width is the diagonal times a over the root, and the height is the diagonal times b over the root. For 16:9 the root is 18.35756, for 4:3 it is 5, and for the ratio marketed as 21:9 — actually 64:27, and not 21 to 9 at all — it is 69.46222.

Compute a few and the shape of the answer appears. A 24-inch 16:9 is 20.92 by 11.77 inches, 246.1 square inches. A 27-inch 16:9 is 23.53 by 13.24 inches, 311.5 square inches. A 32-inch 16:9 is 27.89 by 15.69 inches, 437.6 square inches. Notice that area grows with the square of the diagonal within one ratio, so 32 inches is not 19% more screen than 27 — it is 40% more. That is the single most useful thing this arithmetic gives you when you are choosing between two sizes in the same shape.

The 27-inch that is smaller than the other 27-inch

Fix the diagonal and vary the ratio, and the numbers stop being intuitive. A 27-inch 16:9 gives 311.5 square inches. A 27-inch 21:9 gives 261.1 — the same diagonal and 16.2% less screen. A 27-inch 32:9 gives 190.0, which is 39.0% less. The wider the ratio, the further the diagonal stretches along a direction that buys you very little area, because a long thin rectangle uses its diagonal inefficiently. The square is the extreme of efficiency and the 32:9 strip is close to the extreme of waste.

Turn it around and the practical guidance is clearer. To match the area of a 27-inch 16:9, a 21:9 panel needs a 29.49-inch diagonal — so the 34-inch ultrawide people actually buy is a genuine upgrade in area, at 414.0 square inches against 311.5, while the 27-inch ultrawide is a downgrade dressed as an equal. And the ultrawide does buy you something real in exchange: 24.88 inches of width against 23.53, so 1.34 inches more horizontal room for side-by-side windows, paid for with 2.75 inches of lost height.

The same effect explains the format wars in laptops. A 13.3-inch 16:10 panel has 327.6 square inches at 27 inches of diagonal against 311.5 for 16:9 — a 16:10 screen of a given diagonal is always taller and always larger in area than a 16:9 one, which is why the industry drifted back to 16:10 for work machines after a decade of 16:9. And a 4:3 panel of the same diagonal is larger still, at 349.9 square inches, which is why the old office monitors felt bigger than their replacements even when the number on the box went up.

PPI, worked from the pixel diagonal

Pixel density has the same shape as the geometry above. PPI is the diagonal measured in pixels divided by the diagonal measured in inches, and the pixel diagonal is Pythagoras again over the horizontal and vertical pixel counts. A 3840 by 2160 panel has a pixel diagonal of 4,405.8, so on a 27-inch chassis it is 163.2 PPI and on a 55-inch television it is 80.1. Same pixels, same picture, half the density, because the density is a property of the pair and not of the resolution.

Work the numbers across a set of real devices and the spread is enormous. A 6.1-inch phone at 2556 by 1179 has a pixel diagonal of 2,814.8 and reaches 461.4 PPI. A 13.3-inch laptop at 2560 by 1600 comes to 227.0. A 27-inch panel at 2560 by 1440 is 108.8, and the same 27 inches at 3840 by 2160 is 163.2. A 55-inch 1080p television is 40.1 PPI — a factor of eleven below the phone. Every one of those is a correct number and none of them tells you which screen looks sharper.

PPI means nothing without a distance

The eye does not measure inches. It resolves angles, so what determines whether you can see the pixel structure is how many pixels fall within one degree of your visual field — pixels per degree. The conversion is one line of trigonometry: a pixel of physical size 1 divided by PPI, at distance D, subtends an angle of twice the arctangent of one over twice PPI times D, and pixels per degree is the reciprocal of that in degrees. For every device below the small-angle shortcut, PPI times D times pi over 180, agrees to the printed precision, so use whichever you prefer.

Apply it and the ranking turns over completely. Held at a foot, the 461.4-PPI phone delivers 96.6 pixels per degree. The 13.3-inch laptop at 227.0 PPI, used at twenty inches, delivers 79.2. The 27-inch 2560 by 1440 monitor at two feet delivers only 45.6. And the 55-inch 4K television at 80.1 PPI, watched from ten feet, delivers 167.8 — nearly twice the phone, from a panel with less than a fifth of its density. Sorted by PPI the phone is first and the television seventh; sorted by pixels per degree at each device's own working distance, the television is first and the phone third.

The cleanest demonstration is the two extremes. A 55-inch 1080p television has 40.1 PPI, the lowest number anywhere in this comparison, and at ten feet it delivers 83.9 pixels per degree. A 6.7-inch phone has 392.8 PPI, nearly ten times as dense, and at a foot it delivers 82.3. The screen with a tenth of the pixel density presents the eye with slightly more detail per degree, purely because of where it sits. That is why the useful benchmark is angular: around 60 pixels per degree is the conventional threshold at which a normally sighted person stops resolving individual pixels, and the distance at which each device reaches it is worth knowing — 7.4 inches for the 6.1-inch phone, 21.1 inches for a 27-inch 4K monitor, 31.6 inches for the same monitor at 1440p, and 42.9 inches for a 55-inch 4K television.

CSS pixels, device pixels and devicePixelRatio

The web has its own pixel, and it is not the one on the panel. CSS Values and Units fixes 1 inch as 2.54 cm and as 96 px, with 1 pt equal to one seventy-second of an inch, and it defines the reference pixel as the visual angle of one pixel on a 96 dpi device at a nominal arm's length of 28 inches. Work that angle out and it is about 0.0213 degrees, which is 46.91 reference pixels per degree. That number is the anchor of the whole system, and it lands remarkably close to the 45.6 pixels per degree of a 27-inch 1440p monitor at two feet — the specification was calibrated to the desktop display of its era.

Because the reference pixel is an angle and not a physical length, a dense screen has to pack several device pixels into each CSS pixel to keep text the same apparent size. The ratio is exposed as window.devicePixelRatio, which the CSSOM View specification defines as the CSS pixel size divided by the device pixel size at the current page zoom. On a phone whose panel is 2556 by 1179 with a ratio of 3, the viewport your layout actually sees is 852 by 393 CSS pixels. That is the number your media queries respond to, and it is why a phone advertising more horizontal pixels than a laptop lays out as a narrow device.

Why 4K names a width and 1080p names a height

The two naming systems come from different industries. 1080p is broadcast television nomenclature: the number counts active lines from top to bottom, inherited from the scan-line vocabulary of analogue TV, and the letter says the lines are drawn progressively rather than interlaced. 4K is cinema nomenclature: the number counts horizontal pixels in thousands, because a film scanner's resolution was quoted by how many samples it took across the width of the frame. Nothing forces the two to be consistent, and they are not.

There is a second inconsistency inside the word 4K itself. Digital cinema's 4K is 4096 pixels wide, which is two to the twelfth and a genuine four thousand and ninety-six. The 4K sold to consumers is UHD at 3840 by 2160, which is 93.8% of that width, chosen because it is exactly double 1920 by 1080 in each direction. That doubling is why UHD has exactly four times the pixel count of 1080p: 8,294,400 against 2,073,600. The label 4K therefore rounds up by 6.2% in the living room and is exact in the cinema, and the two are frequently reported as the same thing.

The diagonal-inch convention has a similar history of drift. It started with cathode-ray tubes, where the number quoted was the diameter of the glass envelope — including the part hidden behind the bezel, which could be an inch or more of picture you could not see. The gap between advertised tube size and visible picture became a consumer-protection matter, and manufacturers began publishing a separate viewable image size alongside the tube size. Flat panels ended the problem physically, since the panel is the picture, but the diagonal survived as the unit everyone quotes — which is how we ended up with two 27-inch monitors whose usable areas differ by 16.2%.

Frequently asked questions

Why does my new 27-inch ultrawide feel smaller than my old 27-inch?

Because it is. At a fixed diagonal, area falls as the rectangle gets longer and thinner, and the drop is bigger than intuition suggests. A 27-inch 16:9 panel is 23.53 by 13.24 inches, 311.5 square inches. A 27-inch 21:9 is 24.88 by 10.49 inches, 261.1 square inches — 16.2% less. A 27-inch 32:9 is 25.99 by 7.31 inches, 190.0 square inches, down 39.0%. What you gained is 1.34 inches of extra width; what you paid is 2.75 inches of height, and height is what a document, a code editor and a web page consume. To get the same area as your old 27-inch 16:9, a 21:9 panel needs a 29.49-inch diagonal, which is why the ultrawide sizes that feel like an upgrade start at 34 inches: a 34-inch 21:9 is 31.33 by 13.22 inches and 414.0 square inches, a third more area than the 27-inch 16:9 and essentially the same height. Compare area rather than diagonal whenever the ratio changes, and compare height separately if your work is vertical.

Is a higher PPI always sharper?

No, and the counter-example is sitting in your living room. Sharpness as experienced is angular resolution — pixels per degree of visual field — and that is PPI multiplied by viewing distance, so a low-density screen viewed from far away can beat a high-density screen held close. Measured across a realistic set: a 55-inch 1080p television at 40.1 PPI, the lowest density anywhere in the comparison, delivers 83.9 pixels per degree at ten feet, while a 6.7-inch phone at 392.8 PPI — nearly ten times denser — delivers 82.3 at a foot. Ranked by PPI, the phone wins by an enormous margin. Ranked by what your eye actually receives, the television edges it. The same logic explains why a 27-inch 1440p monitor can look coarse at 45.6 pixels per degree while a 4K panel of the same size reaches 68.4, and why a 4K television is a bigger visible upgrade in a small room than in a large one. If you want one number to shop by, use pixels per degree at your real seating distance, and treat around 60 as the point where individual pixels stop being resolvable for normal vision.

How far should I sit from a 4K television for it to be worth it?

Closer than most people do, and the arithmetic tells you exactly how close. Take the 60-pixels-per-degree threshold as the point where extra resolution stops being visible to normal vision, and solve for distance. A 55-inch 4K panel at 80.1 PPI reaches 60 pixels per degree at 42.9 inches, so from any distance greater than that you are seeing everything the panel can show and a higher-resolution set would look identical. A 65-inch 4K reaches it at 50.7 inches. A 55-inch 1080p panel at 40.1 PPI only reaches it at 85.8 inches, which is where the upgrade case comes from: if your sofa is at ten feet, the 1080p set is already delivering 83.9 pixels per degree and is well past the threshold, so the visible gain from 4K at that distance is small. Move the sofa to seven feet and the 1080p set drops to about 59 while the 4K set is at 117, and the difference becomes obvious. So the honest answer is that 4K pays for itself in proportion to how large the screen is relative to the room, and a bigger screen at the same distance buys you more visible benefit than the same screen at higher resolution.

Why does my CSS see 393 pixels of width when the phone has 1179?

Because CSS pixels and device pixels are different units, and the phone reports a devicePixelRatio of 3. CSS Values and Units defines the reference pixel as an angle rather than a length — specifically the visual angle of one pixel on a 96 dpi display at a nominal arm's length of 28 inches, which works out to about 0.0213 degrees, or 46.91 reference pixels per degree — and fixes 1 inch as 96 px and 2.54 cm. Because the unit is angular, a denser display has to map several device pixels onto each CSS pixel so that a 16 px paragraph stays the same apparent size to the reader. CSSOM View defines window.devicePixelRatio as the CSS pixel size divided by the device pixel size at the current page zoom, so a ratio of 3 on a 2556 by 1179 panel yields a viewport of 852 by 393 CSS pixels. That is what your media queries respond to, what getBoundingClientRect returns, and what you should be laying out against. The device pixels still matter for one thing: raster images. An image displayed at 393 CSS pixels wide on a ratio-3 screen needs a 1179-pixel source to appear sharp, which is the entire reason srcset and the x descriptors exist.

Is UHD the same thing as 4K?

Not exactly, and the gap is 6.2%. Digital cinema's 4K is 4096 pixels wide, a number chosen because it is two to the twelfth power, and paired with 2160 lines that comes to 8,847,360 pixels. The format sold to consumers as 4K is Ultra HD at 3840 by 2160, which is 93.8% of the cinema width and 8,294,400 pixels. The reason for 3840 rather than 4096 is compatibility: it is exactly double 1920 in each direction, so UHD holds exactly four times the pixel count of 1080p, 1080p content scales into it with a clean integer factor, and the aspect ratio stays 16:9 instead of moving to the cinema's wider shape. The naming confusion is inherited: 1080p counts lines from top to bottom, because television described pictures by scan lines, while 4K counts pixels from left to right, because film scanners described resolution by samples across the frame. Neither industry had a reason to match the other, so a consumer standing in a shop is comparing a height to a width. In practice, if a television is advertised as 4K it is 3840 by 2160, and the only places you will meet true 4096-wide 4K are cinema projection and film production.

Why are screens measured diagonally in the first place?

It began with the cathode-ray tube, whose screen face was a section of a sphere and effectively round, so the only single number that described it was a diameter. When tubes became rectangular the industry kept quoting the diagonal of the glass envelope, and that is where the trouble started: part of that glass sat behind the bezel, so the advertised size included an inch or more of picture the viewer could never see. The gap became a consumer-protection issue and manufacturers were pushed into publishing a separate viewable image size next to the tube size. Flat panels removed the physical problem, because the panel is the picture and there is nothing hidden, but the diagonal survived as the unit everyone quotes, purely by momentum. The convention also survived metrication: screen diagonals are given in inches worldwide, in countries that use metric units for everything else. The practical consequence is the one this article opened with — a single diagonal describes an entire family of very different rectangles, and comparing two screens by their diagonals alone is only valid when they share an aspect ratio.