Pixels and ppi (pixels per inch)

By CRAIG KUNCE

Every web designer should have a good understanding of the screens and devices their web sites will be viewed on. While these change from time to time, I felt it would be a good idea to include some helpful information on the technology we design for. I also thought is may be helpful to describe, in some detail, what some common web design terms are and what they mean.

If you're like me,whenever I'm reading about web design, html, and css, I tend to hear some common terms that refer to the more technological side of web design, referred to as web development. This causes some designers to pause and ask, "Are you going to force me to learn how to code a site?!" The answer is usually, "Well, kind of." Every designer should know what html code is. As you get adventurous, you should continue to learn as much code as you're comfortable with—and don't be afraid to challenge yourself. Some web design has to be done in code view, and some should be done in code view.

Let's begin with the smallest common denominator when it comes to viewing and designing web pages: a pixel.

Pixels

As we grow and evolve as web designers, explore media queries, and convert our css from pixels to more flexible percentages and ems, we still need to know how web devices and screens handle pixels.

One thing has remained fairly certain over the years, the pixel is getting smaller and smaller, and our viewing screens are getting prettier and prettier (through increased resolution—or pixel density). The iPod touch and iPad 3 really set the bar high with regards to detail and resolution on handheld devices. Their releases impressively surpassed the resolution of even the finest magazines we read. I remember reading my first Communication Arts journal in college and looking in amazement at the 175 lpi resolution and how it gave such detail and clarity to the printed images. The same detail and clarity arrived on digital devices with the iPad 3 in March, 2012.

Most of us know that the smallest area we can manipulate, change and display on a screen is a pixel. However, a pixel can be different depending on what type of screen it is viewed. For web designers, many articles have been written that discuss a css pixel vs. a device pixel. This distinction makes sense, especially when discussing scaling and zooming on a device, but to a beginning web designer it may be a bit confusing. It was for me. In order to clarify the issue, myself being a visual person, I like to teach in terms of a pixel, just a pixel, no matter where it is, or what size it is. Let's take a closer look at pixels.

The fancy term used to describe light we see coming from a computer/TV screen is additive light. This refers to the fact that we are seeing various combinations of Red, Green and Blue light added together to make all the colors we see on the screen. Stage and theatre lighting professionals use red, green and blue lights to create different effects when shown on the actors. When you combine all three lights you get a bright white spotlight. A pixel on a screen does the same thing. The pixel can shine red, green or blue light, or various combinations of all three to make the millions of different colors we need to build a picture on the screen.

Put a tiny, very tiny, drop of water on your computer screen. Notice the bright red, green and blue dots? The water magnifies the RGB colors glowing from each little pixel that your screen is using to create your picture. You can also use a loupe or magnifying glass to see them.

The individual colors you see are called sub-pixels. Sub-pixels are either red, green and blue—the primary colors of additive light. Sub-pixels can be arranged in different ways depending on the screen, technology, and manufacturer. Here's an example of sub-pixel layouts as they may appear on a computer or device screen:

 

sub-pixel layout

 

In the first example, we see the three RGB sub-pixels combining to make one pixel.

When we group a bunch of pixels together they form a screen.

When designing web pages, we must carefully consider the screen size of the screen we are delivering our web page to.

Screen Size

Every screen you look at is made up of pixels. As we just discussed, these are tiny little areas, usually squares or rectangles, that are placed next to each other in rows and columns to make a larger rectangular shape—the screen. Most screen manufacturers categorize their screens by pixel size (width x length).

512 x 342 px - Mac SE30 (1988)

960 x 640 px - iPod 4 Touch (2010)

1024 x 768 px - iPad 2 (2011)

1280 x 800 px - MacBook Pro 13" (2011)

2048 x 1536 px - iPad 3 (2012)

Now, this is where we can get a little confused. The size of a pixel is different, depending on the device screen you're looking at. As technology advances pixel size continues to get smaller. This is true for computer screen, TVs, LCD displays, and digital camera pixel light sensors.

Here's an interesting reference chart to see how technology has reduced the physical size of a pixel on computer screens:

 

pixel_size_chart

 

(Note: Pixels are usually measured in microns. A micron, also referred to as a micrometer, is one-millionth of one meter. Pixel pitch refers to the distance between the center points of two pixels. The space between pixels may differ, so the actual size of one pixel may differ as well).

The thing to remember here is that because the physical size of a pixel has continued to get smaller, a device may look small, but it may also pack the same number of pixels as a larger screen. A good example of this is the little screen on an iPod touch. It actually has 960 pixels, horizontally. That's enough to display many web sites "full-pixel-size." So, even though it's only about 4" wide, the pixel count is similar to a regular size computer monitor. And the clarity of detail is amazing. Here's a visual:

 

screen_size_ipod_vs_laptop

 

Screen Resolution

Although resolution is commonly mistaken for screen size, it actually refers to the total number of pixels per a certain measurement, usually width or length. It can also be referred to as pixel density.

Digital screen resolution measurements usually state screen resolution in ppi (pixels per inch). Again, measured linearly, in either width or height. The print equivalent would be lpi, or lines per inch.

Here are some common screens and their resolution (ppi):

326 ppi - iPod 4 Touch

264 ppi - iPad 3

132 ppi - iPad 2

113 ppi - MacBook Pro 13"

72 ppi - Mac SE30

As you can image, the higher the resolution (or pixel density), the sharper the image on the screen.

Measure your screen's resolution

In order to measure the size of your screen's resolution try this idea (I first saw this on Wikipedia):

300x300_px_square

The above square is 300 x 300 pixels. Measure it's size (width or height) in inches on your screen. Divide 300 by your measurement and you'll have your screen's resolution, in ppi, or pixels per inch.

(Note: This may not be accurate or apply on some mobile devices, as some images and web sites may be zoomed and stretched)