Pixels as Relative Units of Measure

The Web Content Accessibility Guidelines, Checkpoint 3.4 suggests that we use relative units in our Cascading Style Sheets for sizing rather than absolute units for sizing items on our web sites. This applies to widths, heights, lengths, and text size.

Accordingly, accessibilty and standards advocates recommend sizing text with em units or percentages via CSS to maintain flexibility in text sizing. See Richard Rutter‘s How to size text using ems for an interesting CSS technique and the followup comments for other valuable pointers on sizing text.

Nonetheless, designers and developers have always found that pixels are the most consistent across platforms and browsers, and many still use pixels for sizing their text in their style declarations.

Pixels are Relative Units

In almost all cases when these issues arise in a forum, on a discussion list, or in the comments on a blog, someone always points to the fact that pixels are relative units. They are, indeed, correct. The W3C tells us in the CSS Specification that relative length units include em, ex, and px.

Further, they may use this fact to suggest that IE is wrong for not allowing pixel based text to resize and that in using pixels they have done their part to meet Checkpoint 3.4.

Following the letter of the law for Checkpoint 3.4 would allow us to use pixels for text sizing. However, I don’t believe that it is pragmatic to treat pixels as a relative unit like % or em, despite the fact that it may technically be a relative unit.

The size of a pixel is most definitely relative to the resolution. On my 17″ monitor at 800 x 600, I have 800 dots across, and at 1024 x 768 I have 1024 dots across. Nothing could be more obvious – pixels are a relative unit. In my opinion, using pixel units for text sizing is neither in the spirit, nor supportive of Checkpoint 3.4.

Relative to what?

Despite the fact that pixels are a relative length, on my display at 1024 x 768, a pixel is always the same size. In my every day activities I am not going to change my monitor resolution, and I doubt anyone would in the course of their normal usage.
With that in mind, here are a few questions:

1. If I set my browser to make the text larger, and the text stays the same size, is it relative or absolute?
2. If the text size changes, is it relative or absolute?
3. Is it IE that is incorrectly locking down text sized in pixels, or other browsers that are incorrect for not locking it down?

Don’t get me wrong — I much prefer the behaviour of modern browsers like Firefox and Opera that allow text sized in pixels to be overridden, but I wouldn’t go so far as to say IE is flat out wrong. Can you resize a pixel without changing your monitor settings? If it does resize, isn’t it now some other number of pixels?

Pixels are a relative unit – relative to monitor resolution. % and em are relative to a browser setting, and it is the browser setting that matters for every day use, and I believe it is what matters for Checkpoint 3.4.