January 01, 2002
Real Practice Font Sizing
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. In this column, we conclude 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's the fact that different operating systems use different scales for points. And finally, we have to keep in mind that once you assign an absolute size, the user can't change the size of your fonts. Add it all together, and it's enough to keep a designer from ever touching the
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 of your text in the same proportions you intended. The drawback is dealing with all the bugs that the browsers have in their relative-size implementations. Numeric scales, the best solution, are treated as pixels by IE3, and the 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
(And remember, anything below
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.
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.
In the following article, we'll address some feedback by web designer, Todd Fahrner, and clarify a few points from previous columns.
Absolute Font Sizes: A Clarification
|
|
||||||||||||||||||||||||||||
|
|
 |
||||
 |
|
|||
 |
||||
 |
|
|||
|
||||
 |
|
|||
|
||||
 |
|
|||
|
||||
 |
|
|||
|
||||
more
