Don't Do That!

Pixel font sizes are one of the worst misfeatures in the CSS specification.

Some background

CSS allows the author to specify most of the size and distance values (height, margins, border width, and so on) in pixels, which seems simple enough:

p {
  margin-left: 50px;
}

"Hey, it's 50 of those little phosphor dots from the left edge of the containing block! All right! Now I can put it precisely where I want it to be!"

Hold on there, Johnny.

In practice that's true, but that's not the intent of the px unit. According to the specification, the pixel is a relative unit:

Pixel units are relative to the resolution of the viewing device, i.e., most often a computer display. 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 90dpi and a distance from the reader of an arm's length. For a nominal arm's length of 28 inches, the visual angle is therefore about 0.0227 degrees.

Cascading Style Sheets, Level 2, at http://www.w3.org/TR/CSS2/syndata.html#pixel-units

...which, of course, not one browser implements for screen rendering, using instead, yes, one glowing dot at the current display resolution.

Now, this would be fine, as it turns out there's situations where pixel-specific lengths are useful, such as lining up raster images with surrounding blocks. However, because the CSS standard is pleasantly uniform, any length unit is a valid size for fonts.

As an added bonus, most designers who use fixed font sizes at all tend to pick spectacularly small ones. font-size: 10px seems to be the most common, which looks okay at 1024 by 768 pixels on a 19-inch monitor but can be obnoxiously hard to read at 1600 by 1200 pixels on the same monitor.

Accessibility problems

Especially if your visitor is visually impaired. Most recent web browsers allow the user to turn the font size up (or down) to make it more comfortable. Internet Explorer, however, which is still the most popular browser on the planet, will happily override blind Aunt Tillie's readable 20 point text with 8 pixel flyspeck at the whim of any and all designer pages, sending her scrabbling for her reading spectacles.

This is a problem. Other browsers don't do that, and it'd be nice if everything did the right thing, but this is not an ideal world.

Better

The em and percent units are designed to scale relative to the size of the containing block in various ways. For font sizes, that means that they'll (eventually, after all the containing blocks have been handled) scale to the user's configured font size. Aunt Tillie is happy because the text is nice and large while Gamer Joe with his razor-sharp eyes is happy because he can shrink the website down to take less real-estate from his other windows.

Pixel font sizes are, in fact, not a CSS misfeature. Careless use is wantonly unhelpful, and browsers that don't implement CSS correctly are Just Plain Wrong, but pixel font sizes are in themselves quite defensible.

Consider font hinting. Many common fonts contain hinting information, designed to make them display better on screen. Unfortunately, not all fonts - even the most common ones - contain this information for all screeen display sizes. Fonts at unhinted sizes are ugly as sin and can be almost illegible. In an ideal world one would avoid these situations, but not all web designers are free to do this (managers being another misfeature of the Real World) and that's where pixel size becomes a Good Thing.

Consider, further, that someone technical like Gamer Joe with their super-high-res screen is probably used to tiny text, and is disproportionately likely to have a proper browser that can overrule anything you set anyway. Aunt Tillie, on the other hand, has Internet Explorer at 1024x768 (like 90% of the internet) and has no idea that users can adjust font sizes. For a commercial site, making things look right for her usually has to be a priority.

And what about those cases where text is meant to be very small? Very small sizes generated automatically are completely unreadable on a fair proportion of browsing setups. Pixel-set Flyspeck 3 may need a magnifying glass, but at least the characters are correctly formed; em-set Flyspeck may not be readable at any resolution.

So as long as developers have to deal with designers and lawyers, it's not a misfeature of CSS. The need for boilerplate might be a misfeature of the world, of course, but that's another story.

Log in or register to write something here or to contact authors.