Resolution, PPI and Aspect Ratio
Three numbers describe a screen's pixels: how many there are, how tightly they are packed, and the shape they make. A fourth, the scale setting, decides how big everything looks.
Resolution is how many pixels a screen has, such as 2560 × 1440. Pixel density, in pixels per inch (PPI), is how tightly they are packed, so the same resolution on a bigger screen means a lower PPI. Aspect ratio is the shape, width to height, such as 16:9. Display scaling then decides how large text and windows are drawn, which is why a browser often reports fewer CSS pixels than the screen really has.
“1440p”, “27 inches”, “16:9”, “125%”: every screen comes with a handful of numbers, and they answer different questions. This guide takes them one at a time. The Screen Resolution tool shows what your own browser reports for each.
Resolution: how many pixels
A screen’s resolution is its pixel count, written width by height: 1920 × 1080, 2560 × 1440, 3840 × 2160. The shorthand names count only the height, so “1080p” and “1440p” are the second numbers.
Each of those pixels is what the W3C calls a device pixel: “the smallest unit of area on the device output capable of displaying its full range of colors.” More of them means more detail can be shown, but only if the screen is big enough, or close enough, for the extra detail to be seen.
Pixel density: how tightly they are packed
Resolution says nothing about size. Lenovo defines pixels per inch as a measure of “how many individual pixels are packed into each inch of the display”, and makes the point that matters: “Two screens with the same resolution but different sizes will have different PPI.”
Working it out takes two steps, and the PPI Calculator does both:
- 1
Find the diagonal in pixels, by Pythagoras: the square root of width² + height². For 1920 × 1080 that is about 2,203 pixels.
- 2
Divide by the diagonal in inches. On a 24-inch screen, 2,203 ÷ 24 gives about 91.8 PPI.
ViewSonic’s own examples line up with the same arithmetic:
| Screen | ViewSonic says | By the arithmetic |
|---|---|---|
| 25-inch, 1920 × 1080 | about 88 ppi | 88.1 |
| 32-inch, 1920 × 1080 | about 69 ppi | 68.8 |
| 27-inch, 2560 × 1440 | about 108 ppi | 108.8 |
| 27-inch, 3840 × 2160 | about 163 ppi | 163.2 |
The PPI Calculator also gives the dot pitch, the distance from one pixel to the next: 25.4 millimeters divided by the PPI, so about 0.28 mm at 91.8 PPI. It always asks you to type the diagonal, because no browser can measure one.
Whether a higher density is worth having depends on where you sit. Lenovo notes that “sitting closer to the screen allows more detail to be perceived, while increased distance reduces visibility differences between resolutions”, and ViewSonic that the point where more PPI stops being noticeable “depends on viewing distance and personal preference.”
Aspect ratio: the shape
Aspect ratio is width to height, reduced to the smallest whole numbers. ViewSonic lists the ones you will meet: “Frequently encountered monitor aspect ratios include 4:3, 16:9, 16:10, and 21:9.”
| Name | Example resolution | Exact ratio |
|---|---|---|
| 16:9 | 1920 × 1080, 2560 × 1440, 3840 × 2160 | 16:9, about 1.78 to 1 |
| 16:10 | 1920 × 1200 | 16:10, 1.6 to 1 |
| "21:9" | 2560 × 1080 | 64:27, about 2.37 to 1 |
| "21:9" | 3440 × 1440 | 43:18, about 2.39 to 1 |
The last two rows are worth a second look. “21:9” is the name the industry gives ultrawide screens, not their exact shape. The Aspect Ratio Calculator reduces any width and height to its exact ratio and uses a common name only where one honestly applies.
Shape also changes what a diagonal means. A 27-inch 16:9 screen is about 23.5 inches wide and 13.2 inches tall, and a 27-inch screen of a different shape is not. The Screen Size Calculator turns a diagonal and a ratio into a real width and height.
CSS pixels: the ones web pages use
Web pages are not laid out in device pixels. They use CSS pixels, and the W3C defines those differently: “1px = 1/96th of 1in”, anchored to a reference pixel that is “the visual angle of one pixel on a device with a device pixel density of 96dpi and a distance from the reader of an arm’s length.”
The link between the two is the device pixel ratio. The W3C’s CSSOM View specification works it out as the size of a CSS pixel “at the current page zoom” divided by the size of a device pixel. On a screen scaled to 200%, the ratio is 2: every CSS pixel is two device pixels wide and two tall. Zooming the page in a browser changes it too, which is why the Screen Resolution tool re-reads it whenever the window changes.
Display scaling: why everything looks bigger or smaller
High-density screens would make text tiny if it were drawn one CSS pixel to one device pixel. Operating systems scale it up instead.
- Windows. Microsoft’s documentation says “one logical inch equals 96 pixels”, and lists “the standard DPI settings” as “100% (96 DPI), 125% (120 DPI), and 150% (144 DPI)”. Its support page advises choosing the scale “marked (Recommended)”.
- Mac. Apple says that “by default, your Mac automatically uses the best resolution for the display”, and that you can choose a larger or smaller-looking setting, with the caution that “using a scaled resolution may affect performance.”
Scaling is the right way to make things bigger. Lowering the resolution is the wrong way: Microsoft warns that below a screen’s native resolution “text won’t look as sharp and the display might be small, centered on the screen, edged with black, or stretched.”
Scaling is why a 1920 × 1080 laptop at 125% tells web pages it is 1536 × 864. Nothing is missing: 1920 ÷ 1.25 = 1536. The Screen Resolution tool lists the device pixels, the CSS pixels and the ratio between them, and marks which figures are settings rather than measurements.
Finding your own screen’s numbers
- 1
Open the Screen Resolution tool. It reads the screen in device and CSS pixels, the window size and the device pixel ratio.
- 2
Find the diagonal on the box, the manual or the maker's product page, and put it into the PPI Calculator with the resolution.
- 3
Check the shape with the Aspect Ratio Calculator, and the real width and height with the Screen Size Calculator.
If you are comparing screens to buy, the Monitor Buying Guide covers what else on the specification sheet matters, and which parts of it a browser can check once the screen is on your desk.
Questions
Why does my browser say 1536 × 864 on a 1920 × 1080 laptop?
Because of display scaling. At 125%, each CSS pixel is drawn with 1.25 device pixels in each direction, so 1920 ÷ 1.25 = 1536 and 1080 ÷ 1.25 = 864. The screen still has all 1920 × 1080 pixels; the Screen Resolution tool shows both figures and the ratio between them.
Is DPI the same as PPI?
They are used loosely for the same idea. ViewSonic notes that for monitors and displays "manufacturers and experts use PPI (pixels per inch)", while dots per inch is a printing term. Windows also uses "DPI" for its scale setting, where 96 DPI means 100%.
Can a browser measure my screen in inches?
No. A browser can report how many pixels there are, but not how big they are, which is why the PPI Calculator always asks you to type the diagonal. Screens report their physical size to the operating system, not to web pages.
Is a 21:9 monitor exactly 21:9?
Usually not. 2560 × 1080 reduces to 64:27, about 2.37 to 1, and 3440 × 1440 to 43:18, about 2.39 to 1, while 21:9 is 2.33 to 1. "21:9" is the name the industry uses for ultrawide screens, not the exact shape. The Aspect Ratio Calculator shows the exact ratio.
Should I lower the resolution to make text bigger?
Microsoft advises against it: it is "usually best" to keep the resolution marked Recommended, because at a lower one "text won't look as sharp". Change the Scale setting instead, which enlarges text and windows while every pixel is still used.
How this guide was made
The definitions of the CSS pixel and the device pixel ratio are quoted from the W3C's own specifications, the scaling behavior from Microsoft's and Apple's documentation, and the pixel-density examples from ViewSonic's, each with the date it was read. Every PPI, ratio and size in the text is arithmetic on the numbers shown, and was checked by hand.
No recommendation of a resolution or pixel density for any use: the right one depends on the screen's size, how far away you sit and your eyesight, and the sources quoted here say the same. Printing resolution is not covered.
- 01The px unit ("1px = 1/96th of 1in"), the reference pixel defined as a visual angle at arm's length, and the device pixel: W3C, CSS Values and Units Module Level 4, §6.2 (Working Draft, 12 March 2024) — retrieved Sep 25, 2026.
- 02How devicePixelRatio is determined: the size of a CSS pixel at the current page zoom divided by the size of a device pixel: W3C, CSSOM View Module, §4 (Working Draft, 16 September 2025) — retrieved Sep 25, 2026.
- 03The standard Windows scale settings and their DPI values, and one logical inch as 96 pixels: Microsoft Learn, DPI and device-independent pixels — retrieved Sep 25, 2026.
- 04The advice to keep the Recommended resolution and scale, and what happens below the native resolution: Microsoft Support, Change your screen resolution and layout in Windows — retrieved Sep 25, 2026.
- 05How a Mac chooses its default resolution, and that a scaled resolution may affect performance: Apple Support, Change your Mac display's resolution — retrieved Sep 25, 2026.
- 06The definition of PPI, and that two screens with the same resolution but different sizes have different PPI: Lenovo, What Is PPI (Pixels Per Inch)? — retrieved Sep 25, 2026.
- 07Common monitor aspect ratios, and pixel densities for 1080p, 1440p and 4K monitors at named sizes: ViewSonic, What Is Monitor Resolution? Resolutions and Aspect Ratios Explained — retrieved Sep 25, 2026.
- 08That viewing distance influences how clearly resolution and pixel density can be seen: Lenovo, Monitor Resolution and Pixel Density: A Comprehensive Guide — retrieved Sep 25, 2026.
Try the tools
Vivek Kumar runs ScreenTail from New Delhi. He has worked with computers for about 25 years and studied Computer Science. He is not a display engineer or a color scientist, and each guide says where its facts come from so you can check them.