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

...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.


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.