Honey, I shrunk the pixels

This is a question that has probably been debated at length by the great people building web standards and browsers, and it's very possible the real scope of the problem lays beyond my understanding. But, as a person building websites and observing technology evolve, I really have some trouble with this: will it make any sense to use pixels as a unit in a not so distant future?
Here are some facts and thoughts around this question. Be advised this is pretty nerdy and it won't change anything in your daily proceeds as a web designer – if you happen to be one anyway.

Two problems

One: the physical dimensions of a pixel remained nearly the same for some years (early 2000s), mainly because screen technology didn't evolve that much in this period of time. But pixel density has risen up recently and unevenly: we now have a wide variety of pixel physical sizes. Declaring that a font has a size of 16 pixels is therefore like saying a wall is 16 bricks high: this wall will have as much different heights as there are different kind of bricks. It's kind of dumb.

Two: if technology continues to improve at the same rate, physical pixels are going to disappear from our visible world in about a decade or so. What sense does it make to use a unit you can't physically refer to anymore ? Add 10 to your current age and picture yourself at this lovely age, training a kid to CSS. How are you going to explain pixels to him – if he doesn't understand it – without going "well, back in the days…"?

It was meaningful and eye straining.

Using pixels as a unit for type makes a lot of sense when computer screens have a density of 72ppi. At this scale, 10 pixels have the exact same physical dimension as 10 points, a unit used in the print industry for a long time (there are 72 points in one inch). The printing industry was used to points and it made the transition to screen based work much easier. It seems this is part of the reason why Apple chose this resolution when they introduced the Macintosh: "wysiwyg". Also, you couldn't really produce CRT screens with a much better definition at the time, so it came handy.

There was one expense to this choice though: the glyphs were not as well drawn and as defined as a comfortable read would want them to be. Windows chose to set the software resolution of their screens at 96dpi in order to improve readability: letters were a bit better drawn, and the perceived size of text was closer to what you get from books.

Under these physical conditions, using pixels as a unit for the web when it came around made sense because it made things easier. You could use the same unit to size the layout, set the type, and size images. I guess that if IE6 had gotten a decent webpage zooming engine, we wouldn't have had to use ems at all in CSS and could have stuck with pixels to achieve decent results, but I might be wrong here.

Readability improvements

However, these conditions do not provide for a comfortable read, and R&D went on to mass produce screens with a higher density in order to address that. The side effect of this comfort increase is that it breaks the units correlation described above: a physical pixels no longer has the same dimensions as a point. Meanwhile, the mobile industry boost is introducing new device types along with many new screen sizes. Combine the two and you get lots of different screen dimensions to work with, when expressed in pixels.

Legibility on the other hand is very constant driven. And the main constant here is the size of your retina, or more precisely your fovea. The physiology of the human eye dictates the size of what's legible and what's not. Physiology – and our cultural habits – define legibility: we know that at arms length, labour text sized at 11 points (depending on the font) provides a optimized reading experience. Years of practice have lead to this result; not a point below, not a point above, it is this precise size that works. If we care about legibility and user comfort in our projects, we should be able to precisely and consistently size text in terms of physical rendering dimensions. But we are using a none constant unit to size elements requiring a constant behavior.

Pixel pot

side by side comparison of 4 different screens

I did some basic tests with some text set at Verdana 16px and 16pt on a 2px/2px checkerboard background. You can try them for yourself (view source to get the differences) if you want (if you can make screenshots on Android and send them to me, that would be greatly appreciated). To my surprise (or not), the point size doesn't quite match the pixel size. To your discontent, I did not inquire for the reasons behind this fact, sorry. But I will.

side by side comparison of 4 different screens

The screenshots of the MacBookPro, iPhone 3GS, the iPad and the iPod 4G reduced at 50% show a very consistent rendering of the font and background, in terms of pixel count. The background on the iPad and on the iPod 4G show some fuzzy aberrations, but very light. Given the pixel density difference between the MBP and the iPhone 3GS though, there is a very big difference of font size measured in a proper distance unit. The uppercase L is 12 pixels high or 2,3mm on the MBP, and 1,87mm on the 3GS. On a 24" iMac it would be 3.22mm. So if you want a 16px MBP verdana on a 3GS, set it at 18px. And for the iMac, set it at 14px (if you can). Glancing at this situation, one would be tempted to just go {font-size: whatever;} and don't look any further.

How about we leave the pixels where they belong?

If pixels are going to get smaller and smaller, and if the devices are recomputing text / layout sizes for an appropriate display anyway (through the viewport meta tag), couldn't we consider our screens as paper and use the point unit as in print work? We could set the font size at 10 points, the browser's rendering engine would grab the device's ppi and compute the necessary number of pixels needed to display the text at this physical size on the screen. Wether we have last year's Samsung, this year's iPhone or next year's LG, the text would have exactly the same size to the eyes of the reader and that's what counts most.

In the same vein, maybe we should detect screen sizes in inches or mm, rather than in pixels. The screen size of a device dictate how we interact with it. You hold a smartphone a little closer than arm's length, a tablet more like a book, a laptop 1/3 further and a 24 inches display a little further again. Grouping devices by families of physical screen sizes would allow us to create families of reading context (and distance) in a more effective way than having to take into consideration the screen resolution and density. And we wouldn't have to worry about LG's next popular screen settings and update our css for it. Each new device would fit into the palm, tablet, laptop or desktop family you would have cared about initially, which is already enough work in itself.

These are just suggestions from someone who's been tinkering with the idea for a few weeks, so as said above, I surely miss the whole picture and all the constraints involved in rendering a font at a specific size on all screens in ten years from now. Watch this entry for updates here if you feel concerned by this question. Any knowledgeable input is welcomed via @thibautsailly and will be transcribed here.


Update:
@dpkendal says : "CSS’s px doesn't mean exact ‘pixels’—the actual number of screen pixels shown is relative to resolution. http://cl.ly/2l4S." @AlanHogan pointed out the same fact.
From the working draft I should have read before posting the article: "However, if the pixel density of the output device is very different from that of a typical computer display, the user agent should rescale pixel values. It is recommended that the reference pixel be the visual angle of one pixel on a device with a pixel density of 96dpi and a distance from the reader of an arm's length." In these conditions, you would have to take in consideration every possible screen resolution and create a style sheet for each one, if you wanted your text to appear at a precise physical dimension. Also, the expression "typical computer display" is a problem in a field where everything moves so fast; what's typical today wasn't 5 years ago and won't be in another 5 years.

« past present »