Font Sizing

Web Review
December 1999

In my previous two articles, we took a look at how font sizes can be specified-- using either absolute or relative sizing-- and the drawbacks of the various approaches. Finally, we wrap it all up with ways to size fonts in practice, and reasons to use various kinds of size measures.

What's A Designer To Use?

Navigating the various pitfalls of specifying the size of your fonts is, as we've seen, a tricky business. Besides the inherent problems in trying to declare an absolute size, which may make your text too small or large for some people to comfortably read, you also have the varying types of display. There are different resolutions, from the old standby 640x480 up to monitors thousands of pixels on a side, and new displays like cell phones and handheld devices with very small display areas. There is the fact that different operating systems use different scales for points. And finally, there's the fact that once you assign an absolute size, the user can't change the size of your fonts. Added together, it's enough to keep a designer from ever touching the font-size property.

The alternative is relative-size measures, which are much better in a lot of ways. They let the user resize text, and they keep all your text in the same proportions you intended. The drawback is all the bugs which browsers have in their relative-size implementations. Numeric scales, the best solution, are treated as pixels by IE3, and percentages are taken in relation to the default font size of a given element in Navigator 4.

So when you get right down to it, the best option is really to use 'em' or 'ex' units. Thus, you can set an H1 element to be 2em, while your copyright statement can be 0.75em, or three-quarters the size of normal text. This might be too small for some people to read, but they can make the text larger if they need to read this text-- something they couldn't do if you set your copyright text to be 8pt.

(And remember, anything below 9pt is unreadable on Macintosh systems, because on the Mac points equal pixels.)

Mixing Sizes

One thing you almost never want to do is mix absolute and relative sizes in the same document. Imagine, if you will, a document with the following styles:

H1 {font-size: 24pt;}
H2 {font-size: 150%;}

Assuming that the normal font-size is 12pt, this will lead to 24pt H1 elements, and 18pt H2 elements. But suppose the user increases his default font size to 18pt. Now H2 fonts will be 27pt large, or actually larger than H1 text!

That's why you generally have to pick one approach, and stick with it. The only exception to this rule is when you have text which has to be a certain size in relation to an image, or set of images. Since the image has an intrinsic size (its height and width), you can work with that as your baseline. So let's say you have text with a class of caption which goes along with some pictures. Further, you know that caption text which is nine pixels high will be a good size in relation to the images. So you use the following:

.caption {font-size: 9px;}

While this still raises some accessibility concerns, it does have the advantage of providing text captions which are sized appropriately to the images. You can do this even if you have all the rest of your fonts sized relatively, since these captions are effectively special cases.

There may be other situations where it's acceptable to use units like pixels, of course. After all, you're styling text for screen media-- if the content is going to be printed out, you might associate an alternate-media stylesheet with the document, where your captions have a different size. (Not too many browsers support alternate-media stylesheets, but that's going to change in the near future, so look for an upcoming article on that very subject.)

Choices...

As usual, it all comes down to which tradeoffs you're willing to make. Here's a summary of what's good and bad about font sizing in general.

Approach	Pros	Cons
absolute sizes	Fix font size to a specific, unalterable size; relatively well-supported	Fix font size to a specific, unalterable size; remove user control over page's appearance
relative sizes	Express font sizes in proportion to each other; allow user to scale text as appropriate to the viewing situation	Many bugs haunt implementations

Armed with this knowledge, hopefully you can find a way to use relative font sizes as often as possible, and resort to absolute sizes only when your clients force you to make that choice.