I choose not to use pixels when specifying measurements in CSS. This idea has taken many by surprise so I thought it would be worth sharing my reasoning here.
Pixels Isolate Digital Media
Pixels represent an unnecessary factor which must be considered when working across media. Pixels have no meaning or application in print. However, the imperal and metric systems, used by the print industry, do have meaning and application on the web. The opportunity to standardize on a single system of measurement is something I find advantageous. I tell the computer something should be an inch and it figures out what that should mean whether it be pixels, dots, fractals or any other method of reproduction.
Pixel is a Misnomer
The word “pixel”, as it’s used in digital media, is a misnomer. Regardless of the actual ppi of the screen, the unit is locked at 96ppi. What’s your ppi? Mine’s about 127.68ppi on this MacBook Air. When a pixel isn’t a pixel, what does its application really provide? Does’t the misleading nature of it’s name serve to confuse? If not yourself, what about individuals just starting out?
There is nothing extraordinarily special about 96px. It just so happened to be around the standard screen resolution when the internet really blew up, and as a result the use of actual pixels as a measurement. At this time, pixels are shrinking and the reasons for why we concerned ourselves with them in the first place are disappearing.
No System of Measurement
Pixels lack a system of measurement. As displays get larger, what benefits are there to using a “system” that doesn’t scale with it? Both the imperial and metric systems are supported in web browsers and graphic applications, both have more then one unit that is applicable to the scales we most commonly work at today, and both are widely used across a multitude of industries and media.
Switching is Simple and Fun
Did you know that 960px is equal to 10in? It’s true. 960 pixels divided by 96 pixels per inch equals 10 inches. ten.gs anyone?
I suggest using points where you would otherwise use pixels as they’re very close in size. The conversion is simple. You can fit exactly three quarters as many points as you can pixels in a particular area. Therefore take the value in pixels and multiple it by .75 to get the value in points.
Example: 8px × .75 = 6pt
Don’t Convert, Embrace
If the thought of doing math to convert feels like a lot of work, please don’t hurt yourself for my sake. I simply provide the formula so you don’t have to figure it out for yourself.
A much better approach is just to change your thinking. I use the imperial system in print and on the web so I think in terms of points, pica, and inches for the most part. When I need a thin line I use 1pt. I can specify hairline too as .5pt, .25pt. A little bit of space is a couple pts. A lot of space might be a few pica or a couple inches. If you do convert, and at times you’ll need to, take a second to adjust the numbers you arrive at. Nobody is going to notice the difference as long as everything stays balanced. Round up or down, drop decimals so on and so forth. Make the numbers make sense.
One Final Note
To some, I am sure this argument sounds like the px vs. em/percent argument, but I assure this is a different concern entirely. Percents and em, as many know, are a relative measures. What I’ve spoken about here is the way I specify absolute measures. You still need to decide when to use absolute or relative, all I’m saying is when you need an absolute measure you’ll want to avoid pixels.