This blog is about Graphic Design, Vector Art, and Cartoon Illustration BradHallArt.com


How to measure in pixels for web design


Pixels, which is short for *picture elements*, are the little tiny squares that make up a raster image. Web pages are measured in pixels. The standard, like just about everything in the computer graphics world, was developed by Apple in the 1980s, and is what is used by professionals today. If you are going to design for the web, you will need to be able to measure in pixels.

When dealing with units of measure that are very, very, tiny, using inches just doesn't work. Even before pixels were used to measure images and type on web pages, a unit of measurement called *points* was used for for newspapers and magazines. In fact, you will still see type sizes sometimes referred to as *points*, as in 12 point, 24 point. The really good news is that points and pixels are the same size when you are designing for the web.

The standard is 72 pixels in an inch. This is because the screen resolution of Macintosh computers has always been 72 pixels per inch. PC screens are slightly different, but only in a trivial way. The standard is 72. So a pixel is a very, very, tiny unit of measurement!

So, doing the math, ten inches equals 720 pixels.

Most web pages are designed to be a little wider than ten inches, and the standard is around 1,000 pixels.

Your iPad is 768 pixels wide.

Your Smart Phone is 320 pixels wide.

The screen that I am looking at right now, on my iMac, is about 2,000 pixels wide.

I hope that this gives you a feel for measuring, and using pixels. As a web designer, you have to think in pixels!