What the hell is a Pixel?

Budding digital designers playing with CSS will have a question to ask us: What the hell is a “px”?

It was an easy question for us. After all we grew up with the clearly inaccurate representations of characters and scenery making up the games we played. We knew that there was some kind of minimum dot that our graphics chipsets and screens could show us. We had a name for this little dot, the Pixel.

We didn’t like the truth that the pixel brought, we wanted more detail, so displays got sharper. Our little dots shrunk and and we saw our characters, text and even photos clearly for the first time. For a long while many even forgot about the pixel.

Our machines shrunk fast and we started carrying them around in our pockets. We started using them everyday and holding them up to our faces. Suddenly, without warning, the pixel was back in our lives. Having a tiny screen just 20cm from our eye the illusion was gone. Our photos looked like backdrops in streetfighter, our text looked like the output of a dot matrix printer. So once again we wanted more.

This time the little pixel shrunk so much, so fast, that it vanished for all but the most trained of eyes.

And on the web. We had a problem.

The size of a pixel had remained pretty much constant for 10 years. We had spent so long knowing that our pixel was roughly the smallest dot we could see at arms length, that we took it for granted. We used it as a unit. We used it all the time. We used it in our raster graphics for logos, we used it for buttons and icons in our software. We used it to get perfectly aligned layouts in websites. We used it to decide the size of our text. We knew we shouldn’t but we did it anyway.

And we broke everything.

Sites, applications and documents created in our careless past were suddenly illegible on our new pocket computers. Perfectly sharp, but as if being viewed from across a street.

Since it was unrealistic to get everything fixed, an idea formed to redefine what we mean by Pixel. The W3C came up with the reference pixel. A trick to bring back the unit that we foolishly took for a constant.

So to future CSS designers: We are sorry for the confusion we caused you. Just try to forget about the pixel and it’s now meaningless original definition. To you a pixel is just an arbitrarily small dot. To us it will always be the size of the ball in pong.