When dealing with screens, the density of the dots that make up your picture is referred to as ‘pixels per inch’. This measures how many pixels, lain end to end, fit along a one-inch line. A screen 10.24 inches wide and 6 inches tall, at 100 pixels per inch, would contain 600 rows of 1024 pixels each. (The diagonal measurement of such a screen would be 11.86 inches, by the way.)
Here’s an example:
Because it’s hard to show high-resolution samples on low-resolution screens, I’ll show you a low-resolution example. This illustrates the difference between two screens; but the size depends on your own screen’s density, so the numbers aren’t absolute.
Take Monitor #1 and Monitor #2. Both are about 11.8 inches; but Monitor #1 has a resolution of 1024×600 pixels (1186px diagonal) while Monitor #2 has a resolution of 341×200 pixels (395px diagonal).
Pixels per Inch. 1186 pixels per 11.8 inches is about 100 pixels per inch. 395 pixels per 11.8 inches is about 33.4 pixels per inch.
Having few pixels per inch means your computer has very little to work with, and the images will be blocky. Having a large number of pixels to work with means your computer can display hairline textures, possibly at the limits of human perception.
Monitor #2 has only 33 pixels per inch, or a little over 1000 pixels in an entire square inch. Monitor #1, meanwhile, has 100 pixels per inch, which is 10000 per square inch. Nine times as much detail!
If you want to see how a hypothetical screenshot would look, see Monitor #1 and Monitor #2.
Some other numbers: Most monitors today are around 100 ppi. Laptop screens might be a bit more high-detail, at 120 ppi or so. At 280 ppi, you’re nearing the edge of human sight. Some people can see more, and others less. The iPhone 4’s screen is about 320 ppi.
So, now that you’ve seen the difference of high vs. low, you’re probably wondering what it all means.
When you look at the example above, you see how the text went from nearly-illegible to crisp and neat. You can probably still see pixels, though, if you looked hard at those letters. In the near future, monitors and screens will all be nearing 300ppi, and those letters will look beautiful. We’ll also have more design options than ‘no line’, ‘thin line’, and ‘thick line’.
Here’s the thing: There is little support for high-density devices.
Windows, the most popular operating system, has only the barest functionality, and is only truly usable on screens with height of at least 720 pixels per hundred ppi (720 for 100 ppi; 1440 for 200 ppi). (Rough numbers, of course.)
Most web-pages automatically set your text to something like 12 or 16 pixels, which is too small to read on a 300ppi screen (think of reading 5px font on your current screen). They also usually set elements of the page to specific pixel widths, which means the proportions will be all wrong and the text will overflow from their boxes.
We need to call on web designers to design for the multitude of screens we have, and to put the power into the browser’s hands. Front-end developers need to work with designers to make their layouts flexible.