Pixels, points, and ems

Many Web designers do all page layout in pixels. That works great if everyone coming to your site has the same display size. It's not so good for the rest of us, however. Users with large displays may not appreciate the 6-inch margins your site uses to ensure that your 640-pixel-wide main content section renders correctly.

Think I'm exaggerating? I'm not. Right now, the front page of my browser fills nearly half of the 17-inch horizontal size of my display. That's an 8.5-inch margin. In fact, I tested it: I put a piece of standard US letter paper on the right side of the display. The only text covered by the paper was the "About Us" menu item. That's a lot of space wasted; I ended up with smaller, harder to read, text crammed into half of my display area.

Next time you're thinking pixels, try thinking points and ems instead. Points are good for general-purpose use since they will scale to any display size. Better yet, a browser can reasonably scale to points, unlike pixels. For anything that will hold text, ems are the correct unit since they will scale up and down with the user's choice of text size. You can rest easy with the assurance that "60 ems wide" is an acceptable width for a paragraph of text, rather than having to speculate on what font size the user will choose.

Points and ems are better than pixels for arranging layout. With these units, your page elements are of reasonable size no matter what the user's settings are. On the other hand, points and ems won't let you align images next to each other -- but this is probably a good thing. Hopefully it will discourage you from creating one of those horrible pages that depends on a large collection of disconnected images all lining up together to form, well, an even larger and uglier image.

About HTML

Let's be honest. For all that everyone likes to remind you that HTML is not a layout language, it has acquired enough layout hints that, in practice, it really is a layout language. That doesn't mean HTML is a good layout language, though. In fact, doing layout in HTML is pretty close to crazy.

If you do your layout in HTML, the user can -- and often should -- override your layout suggestions. You have no way to know the capabilities of the target display. You won't know how large it is, either in pixels or in inches. You won't know how well the user can see it.

The key to successful HTML layout is to acknowledge these limitations and work with them. Go ahead and specify that a given <DIV> is intended to render on the left side of the display beside your body text; just don't try to force it. Don't build a page that will be completely unusable if you don't get what you asked for.

And seriously, don't specify widths in pixels. If you must specify a width, specify it in points or ems.