Knowledge Base Overview

It always amazes me that certain things, despite having no real meaning, are discussed and tossed around almost forever. The magic number 72ppi, as I call it, is one of these things that I run into every now and then.

It is even a little disturbing what some people throw in as their two cents. So, I feel very comfortable throwing in my two cents.

Some background and history

A lack of computer history and therefore fundamentals is probably the reason why some people have difficulties to understand what pixels per inch (ppi) like the 72ppi really mean—and why it doesn't really matter.

It is probably a fact that the 72ppi is linked and originated with Apple, but who cares! To understand the number and ppi we have to look at computers and how they generate output. Note that I wrote computer and not monitor. That is important!

Back in the days

Way back in the days of the first dinosaur computers they had no screens, displays, monitors or whatever you want to call them.

Now, when we think about how a computer in those days presented information like a simple result we have to think ink, print and paper. No images, just text in a line by line format. When we progress and think about how the first monitor looked like it was pretty much the same.

Still no images, just line by line test because that's what they dearly needed. Instead of waiting for the print out they could see the results instantly on a screen. What an improvement!

As an interesting side note: In programming languages we still have commands named "print" for sending data to the output device. The other word is "echo" for sending text to the screen.

Therefore the big question was: "How can we display text on a screen?" There are two problems to this question. First, and obvious for most people: "How do you create a monitor screen and show text?" However, that is not the real problem! The not so obvious question is the toughie and real problem: "How should a computer create text for display?" That second question will lead us to the magic number.

The big chessboard

The engineers at that time had to figure it out and when you think about what a computer does it is really simple. The only thing a computer really does is turning things on and off. Take a chessboard and you know exactly what or where 3B is. Imagine a monitor screen with 8-by-8 squares and you can tell anybody to turn on or off the square representing 3B. Even a stupid computer!

On those first monochrome screens you could in fact see the raster and those little squares. The letters had to be drawn in ways to work with these squares.

Since then not much has really changed simply because computers still only do one thing. Exactly, turning on and off things and a raster is maybe not the only way but most efficient way you can tell a computer to present something on screen. However, things have become smaller and smaller and of course, faster and faster. Oh, and the squares became a new name—Meet the Pixels.

Smaller is bigger

Along came Apple and they thought about how to present text on their first model and screens. At that time the squares became colorful and they also got smaller and smaller. In other words, the density of pixels got bigger on monitor screens. Apple settled for a density or raster representing 72 pixels per inch (ppi). There is a lot of information on the web about how they came up with the number but to some degree it just does not really matter.

What we have to keep in mind is the somewhat fact that 72ppi was and still is a rather pleasing density for looking at a screen.

Your real estate

Despite the fact that screens are bigger today the density is roughly the same. What has changed is the resolution; we kept the density but added some real estate, i.e. more pixels to width and height.

Some math

If you look at the monitor settings in your computer you might see the numbers 1920 x 1080. This would be what we now understand as Full High Definition (FullHD or FullHDTV). This means that the computer (or your HDTV) creates an image with 1080 lines and 1920 pixels side-by-side.

When we divide the resolution pixels with the inches of our screen we will get a number near the 72ppi. It is all we really need for human eyes in front of a computer screen.

Or lets do it the other way around: Take a screen at 1080 lines and with 72ppi it should be exactly 15 inches high. With a 16:9 ratio the screen would be 26 2/3 inches wide which, of course, is the same as 1920 divided by 72. Some Pythagorean theorem and you are looking at a 30 1/2 inch screen.

Resolution belongs to computers

So, does this all mean the computer or TV monitor has exactly 1080 lines? Surprising truth: Maybe but we don't know for sure without looking at the technical specification of the monitor. Important fact: Resolution is what the computer is doing—not the monitor!

Not convinced? Lets step back in time once more. Nowadays we buy flat screen monitors and TVs. Until just a few years ago we bought tubes, CRT monitors. They worked a little bit different and the resolution was something we changed at will. In the early days CRT monitors have been able to show a far better density than the resolution a computer was able to calculate in a timely manner. The time factor by the way is something we should not forget about the old days. The higher the resolution the more computing power is required to generate a fresh image; which is not really true in computer graphics, but that is not the point here.

With flat screens today we usually do not change the resolution. We (should) stick with the default settings. Why? Because, unlike the CRTs, they have those tiny little light bulbs side by side and line by line. If you would change the resolution to anything different than the exact number of little light bulbs some parts of the image would not look so great because a lot of information for the image submitted by the computer falls between two light bulbs, i.e. it gets cut off. Unless you have at least twice the number but we don't waste any thoughts on that.

What really matters

What really matters is the computer's resolution and the number of pixels in that particular resolution. In terms of web design or actually anything presented on any monitor pixels per inch means absolutely nothing. It is also irrelevant how many pixels the screens has or how big or small they are. Simply because we cannot control the size of the output device. We never did and probably never will.

If you design a webpage at 960 pixels wide and it is shown on the giant screen at the Cowboys Stadium in Dallas with 72ppi it would be 13 1/3 inches wide. Doh! Because the pixels on that board are different we would not have to worry about it anyway. What we should know is, that screen appearently corresponds to 2423 x 1088 pixels. Therefore such a web page would look just fine unless the operator for the giant screen would be able to set the resolution to 800 x 600. Then your 960 pixels web page is suddenly cut off. Simply because the only thing that matters is the resolution; not pixels per inch.

Outlook into smartphones

Now here is why I came up with this article. If you look at some discussions about designing for smartphones some people honestly throw in their two cents with inches and pixels per inches. It does not matter! Here is a little scoop at what matters with smartphones, though.

Lets review: As we saw with the giant screen above, even with fist size pixels, the image will look fine because of the distance for the viewer. The 72ppi is only a magic number for viewing a computer screen and even when this number is lower for your TV screen it will be still just fine because you usual don't sit that close watching TV, do you? So, what about smartphone? The quick answer: The number of pixels per inch has to be higher but it still does not matter.

The screen for an iPod or iPhone is about 3 inches high in portrait view and the first generation of displays apparently had 320 x 480 pixels. That's a whopping 160ppi and Apple has doubled this number. According to their tech spec the retina display in the iPhone 4 has 326 pixels per inch!

Now the big question for us as designers and developers is this: Will there be any changes for the design process? Not much because pixels per inch does not matter to us! With the Apple's iPhone and all the other smartphones we are not even dealing with screen resolution anymore. There is something different called the viewport and media.

What clearly is changing is the density of the screen (the number of the little light bulbs) and these are in fact squares per inch. Take your magnifying glass and you see the squares. The smartphone's computer resolution in pixels seems to be of interest but actually it is not. What really matters here is a number which in this case are the pixels for the viewport or media. This means the size of the browser.

Hence, what really matters for smartphones in terms of design is, not pixels per inch, the number or size of squares (light bulbs), but the number of pixels for the viewport.

If you want to find out how to design for a smartphone look out for the dimensions of the viewport.