On Using Pixels

Part of: UsingFontSize

Pixels are the most consistent CSS sizing unit - most CSS supporting browsers get them wrong, but in the same way (treating them as screen pixels rather than CSS pixels *see note below). Unfortunately, they suffer from two crippling drawbacks:

This makes them a huge accessibility problem. IE has by far the largest audience share of browsers, and small text on web sites is a very real problem for a significant number of users. According to Jakob Nielsen, small text comprises 2/3 of the biggest complaint web users have in his [ Top Ten Web Design Mistakes of 2005]. Also consider that high resolution monitors are getting cheaper and more widespread - pixel sized fonts may be perfectly readable at 1024x768 but will they still be comfortable to read at 1600x1200 (on the same sized (or smaller!) monitor)?

Another drawback stems from inconsistent math among various browsers. All modern browsers will display text the same size upon which the rule 'font-size: 15px' applies, but they will not all display the same size if the rule 'font-size 14.5px' applies. To be consistent requires the use only of integer pixel values. If a pixel value is applied to a parent, and a percent or em to its child, the result may be inconsistent size among browsers.

One possibility for sites that really want to use pixels is implementing StyleSwitching, allowing users to chose an alternative style sheet with a larger font if they find your text uncomfortable to read. This is not an optimal solution (IE style switchers will not work if JavaScript has been disabled for example (*see note3 below) but is a better alternative to fixed font sizes with no way at all of enlarging them.)

See Also

note

I think that this change is unhelpful. Yes, there is one browser which treats pixels as css pixels on screen (Opera on the Mac if you set 92 dpi instead of 72) but overall this is negated by the fact that the specs do say that CSS pixels only apply when the resolution is wildly different from 72 dpi, for example when printing. I have yet to see a browser print a web page using 12 printer pixel high text! In this respect, the browsers are correct, so the above change should be undone, or redone in a way to reflect this - assuming it is even relavant. There is a w3c page with pictures about this too, though I can't find it at the moment.

note2

In Internet Explorer's 'Internet Options', users can override all font size declarations in the stylesheets and fall back to the standard browser font sizing. In this case, fonts do scale with the 'view > text size' menu. --Jeroen Visser

However, this isn't a very good solution as: 1-it blasts away any font size styling on websites which implement it in a sane fashion, as well as those which lock it with absolute units; and, 2-it has no effect on line-heights set in px, which will produce overlapping text when the user's font size is larger than the specified line-height. Additionally, it is hidden away in a dialog box that many people never venture near.

note3

However, PHP ones do. http://www.alistapart.com/articles/phpswitch/ --littledave

Thank you for this information. Can you please check out my website and see if I used pixel sizing correctly?: