Values, Units, and Colors - Values, Units, and Colors - page 9

Pixel lengths
On the face of things, pixels are straightforward. If you look at a monitor closely
enough, you can see that it's broken up into a grid of tiny little boxes. Each box is a
pixel. If you define an element to be a certain number of pixels tall and wide, as in the
following markup:
<p>
The following image is 20 pixels tall and wide: <img src="test.gif"
style="width: 20px; height: 20px;" alt="" />
</p>
…then it follows that the element will be that many monitor elements tall and wide, as
shown in Figure 2 .
Figure 2. Using pixel lengths
In general, if you declare something like font-size : 18px , a web browser will almost
certainly use actual pixels on your monitor—after all, they're already there—but with
other display devices, like printers, the user agent will have to rescale pixel lengths to
something more sensible. In other words, the printing code has to figure out how many
dots there are in a pixel.
Unfortunately, there is a potential drawback to using pixels. If you set font sizes in
pixels, then users of Internet Explorer for Windows previous to IE7 cannot resize the
text using the Text Size menu in their browser. This can be a problem if your text is
too small for a user to comfortably read. If you use more flexible measurements, such
as em , the user can resize text. (If you're exceedingly protective of your design, you might
call that a drawback, of course.)
One example of a problem with pixel measurements can be found in an
early CSS1 implementation. In Internet Explorer 3.x, when a document
was printed, IE3 assumed that 18px was the same as 18 dots, which on
a 600dpi printer works out to be 18/600, or 3/100, of an inch—or, if
you prefer, .03in . That's pretty small text!
On the other hand, pixel measurements are perfect for expressing the size of images,
which are already a certain number of pixels tall and wide. In fact, the only time you
would not want pixels to express image size is when you want them scaled along with
the size of the text. This is an admirable and sometimes useful approach. You do end
up relying on the image-scaling routines in user agents, but those have been getting
pretty good. Scaling of images really makes sense with vector-based images like SVG,
of course.