When designing with CSS, one hurdle you have to overcome is consistent font sizing across browsers. A common approach is to set type using pixel measurements. It seems like a good idea because they are consistent and easy to manage. The problem with that approach is that IE won’t let a user make type larger. This causes a usability problem.
There are several approaches to this problem, but I’m going to talk about the one that I use. I came across it in this book: Bulletproof Web Design. No matter how you decide to do it, the important thing to remember is to use relative font sizes.
Update 11-21-07: I've found a simpler way to do almost the same thing and it doesn't require a hack. Simply use 76% as your font-size, like below.
body { font-size:76%; }
That's it! Pretty easy, huh? I have noticed that this method isn't as precise as the more complicated one. Fonts seem to be a tad smaller on the Mac. I can live with that as long as it makes my style sheet simpler.
Consistent in the relative sense
I’m really picky about my designs and it’s hard for me not to use pixel sizing because I want things to be exactly the same across all browsers. I had to compromise a little to go with relative sizing — but not very much.
I start with a style for the <body> tag and set all type on the page to a keyword size of “small.” From there, I use a percentage to size all other type. It isn’t pixel exact since browsers interpret keyword sizes differently, but it’s pretty close. That is, until you look at it with IE5. >:-(
The IE5 hack
IE5 has a keyword sizing bug where it will set the keyword font-size one step larger than your intended size. What do you do? Well, you exploit a couple of other IE bugs to counter it.
First you create a style with he “* html” selector that sets the font-size to “x-small.” This is something that only IE will read. Now, IE5 has type set to the correct size, but in other versions of IE the type is too small.
To fix that, you use the Simplified Box Model Hack (SBMH) by placing a “\” in front of the “f” in a new instant “f\ont-size.” This time you set the size back up to “small.” IE5 doesn’t understand the SBMH and ignores it allowing other versions of IE to be the correct size.
One last hack is simply a fail-safe to get other browsers that might get hung up on all this IE trickery back to the right size. It’s known as the “be nice to Opera” rule. I’m not sure how important it is anymore since my pages look the same in new versions of Opera with or without it. I still keep it in just to be safe.
The code
Here’s what the CSS looks like:
body {
font-size: small;
}
/* Font sizing hack for consistency */
* html body {
font-size: x-small; /* for IE5 Win */
f\ont-size: small; /* for other IE versions */
}
html>body {
font-size: small; /* be nice to opera */
}
Watch the cascade
One thing to watch when setting type with relative sizes is that nested styles are relative to the ones containing them. For example, if you set the page with a keyword of “small” and the “content <div>” with a font-size at 90%, any font-sizes inside the “content <div>” will be relative to 90% of “small.”
I’ve sometimes used Owen Briggs’ method, which sets font size as a percentage at the body level and then uses ems to size particular items.
I’ve been sad to see that my test version of IE7 still buries its “enlarge text” option inside a drop-down menu. I would love it if more people knew that they had the option to enlarge text.