Choosing Fonts for Web Pages


Fonts on web pages are a sticky issue. You need to take into account a couple of things.

First, when you use a font on a web page, for it to look the same on their computer they have to have that font installed on their computer. So if you want to use your new "Gargonzolla" font, don't. Only someone else that has the "Gargonzolla" font will be able to see your site correctly. That's not good. There are a few browsers, like Safari, that do allow you to embed fonts so anyone can see Gargonzolla but the odds are that you don't have a license to use the fonts that way.

Second, studies have shown that some fonts are better than others for reading on a screen. Most printed items user what is called a "serif" font. The other primary type of font are the "sans-serif" fonts. The "sans-serif" font is better for display on screen, and of the sans-serif fonts, Verdana has proven to be the best to use. Below is the letter "F" in each type so that you can see the difference.

serif and sans-serif

You'll notice that the "serif" version of F has the little tails on the letter. These are called serifs. Sans-serif means "without serifs." There are also decorative fonts and symbol fonts. Below is a chart of fonts that are fairly safe to use on your web pages.

FontWindowsMacintoshLinux
Verdanacheckcheck
Timescheckcheck
Times New Roman
Arialcheckcheck
Helveticacheckcheckcheck
Courier Newcheckcheck
Palatinocheckcheck

In fairness, nearly all these are available to Linux users, and many have them installed, but I believe they are not installed by default.

A great technique to use on your web pages is to list multiple fonts as possibilities. In the stylesheet for the page, you can do this:


body {
font-family: Gargonzolla, Verdana, Helvetica, sans-serif;
}

What will then happen is that if a viewer has the Gargonzolla font, the computer will use it. If not, it will check to see if it has the second one in the list, and so on. If you have to use a special font, to be safe you will need to put the words in a graphic.