|Steve Mulder is manager of information architecture in the user experience group of Terra Lycos, where he wears as many hats as possible. He pretends to know a lot about design strategy, interaction design, usability, writing for the Web, and Web development.
Every single day on this planet, at least one new Web designer or HTML coder groans out loud.
It's a groan we've all heard. You've just finished your first Web site using your Mac,
and you giddily go skipping down the lane to tell your friends.
But your giddiness turns to horror when your site loads on their PC. It doesn't look right at all.
Your carefully constructed design is in shambles. The images don't look like they're supposed to,
the colors are different, and the text is the wrong size. Your shoulders slump, and you
That groan is your initiation into the messy and ridiculous world of Web design. And your first
lesson is this: Web pages look different on different platforms.
Today we're going to tackle one aspect of this cruel lesson: text size. As you might already know,
text on a PC generally appears larger than it does on a Mac. That perfect nav bar that you
created on a PC (below, left) looks like crap on a Mac (right). As the screenshot shows, the text (bold Arial font with
FONT SIZE=1) is essentially illegible:
Really, there are two key problems with text size on Web pages:
Today, we're going to explore all of our options for dealing with these two annoying problems.
There are definitely solutions out there, so let's take a look at stylesheets and see if they can help
cut down on the groaning.
- Limited size choices. With HTML, we have FONT SIZE=1,2,3,4,5,6, or 7, and that's it.
Seven sizes for text, and no more. In the nav bar shown above, I'd like to make the text just a little
bit bigger, but SIZE=2 is too big and there's nothing in between. That sucks.
- Platform inconsistencies. If you design on a PC, text is too small for Mac users. If you
design on a Mac, text is unnecessarily large for PC users. Careful typographic layout is ruined.