As I continue my struggle to transform myself from an electronics engineer to an interface/graphic designer, I've been doing a lot of reading on typography. I recently spent some time in The Elements of Graphic Design by Alex White. He talks a lot about typography and offers some generous helpings of advice:

"Complexity will not get a message across because, though it may be interesting to look at, the message won't be legible. Simplicity alone will not get a message across because, though it may be easy to read, its importance won't be recognized. Only simplicity combined with expressiveness will make the message both legible and interesting."

He also quotes R. Hunter Middleton who said:

"Typography is the voice of the printed page. But typography is meaningless until seen by the human eye, translated into sound by the human brain, heard by the human ear, comprehended as thought and stored as memory."

Such inspirational statements give a designer a lot to shoot for, but the second a web designer reaches for these heights, he finds his hands are still tied (behind his back, no less). Since it has never been readily obvious to me along my design learning path what the ins and outs of typography on the web are, I'm going to set them forth as I understand them in one convenient place.

Choosing a Font for a Website

When a website loads on your computer, HTML text is loaded according to the font designated in the web page. The browser checks your computer to see if you have the font the web page wants, and it renders it for you. If you don't have the font it wants, it defaults to another. Here are a few examples:

Note how the last font (4th choice) is a generic term so that the browser can render the user's default serif font (whatever that may be).

The reason the fonts are so limited is because there are only a handful of fonts understood to be universally available on computers throughout the English-speaking world. This is why a random font choice may work on your computer, but beware that it may not show up elsewhere.

So what's the work-around? You have three options:

• First – Create the text you want in a graphics editing program and create an image. Display the image on your web page. This really only works for small amounts of text since you don't want to weigh your page down with massive, text-filled graphics. For example, this text you are reading is HTML text, but the title of this article is an image.
• Second – Embed the font you want in Flash and render your web content as a Flash object.
• Third – Give everyone in the world the font you want to use before launching your website (not gonna happen).

I predict that more and more web-friendly fonts will be made available to the HTML world as the years roll on. For example, we've seen the growing popularity of Trebuchet MS with blogs.

Formatting Online Text

Gratefully, the number of options available for formatting HTML text is growing. I thank CSS for that. There are a lot of web pages that are really hard to read simply because the text is formatted so poorly. Let me give a few pointers.

Limit Your Text Column Width
If you stretch your text to 100% of the width of the window, you'll put your readers to sleep before they can get through the first line. Web readers are typically scanning for information, not cuddling up for a long read. I recommend making your text column width no wider than 500 pixels. This will make the text body appear conquerable and allows the eye to peruse its contents quickly.

Spacious Line Height
Nobody likes a struggle to breathe. Reading text that's crammed together feels that way for the brain, and will turn your readers away quicker than mace out of a fire hose. It depends on the font, but you're usually pretty safe with a line height of at least 120%. This is set in CSS like this:

line-height:120%;

This site uses 140%, which seems to help readability. Dabble with different heights and see what seems reassuring to the eye.

Font Color
I'm of the opinion that text should never be colorful unless it needs specific emphasis. Such things include:

• Links
• Pointing out a particular, important term
• Short text spurts, like titles & subtitles
• Text set-aside for a specific purpose (like code snippets on this site)

If you make all your "reading" text a color, and, heaven forbid, multiple colors, you're already giving the brain something to work on. Then, when you want to emphasize something, you've got to add that much more work to make it stand out. Let your text baseline be simple, then embelish when necessary (not when fun or cute).

I like to keep my "reading" text on the medium gray to black spectrum:

Respect Your Options

Simplicity is also a key in choosing the number of fonts you are going to use on a website. Some designers are bred for their skills in magic, and can make several fonts work all in the same place, but if you're like the rest of us, anything more than 4 fonts is pushing it. If you can justify a specific purpose for a particular font, you grant yourself permission to use it. But if you're trying to "make it fun" or "jazz things up a bit" then you're off the straight and narrow path. Good design is driven by planning, deliberate placement, and stylization.

These are very foreign topics to be inside the brain of an engineer. At least I get to write all this into a code editor.