Forget about using fonts the way you do when you're printing or creating image files in Photoshop. That's not how typography works on Web pages. A Web page gets its fonts from the user's hard drive. The fonts on your own hard drive are not the same as the fonts on any other person's hard drive!
A common mistake made by beginners: They specify fonts in the Web page; they see those fonts on their computer and they look great; then later they see the Web page on another person's computer and it looks terrible. Why? That other person does not have those fonts.
What you need to know is which fonts are okay. The list is very short, so this is not too hard.
There are only three classifications that are safe to use with today's Web browsers (by "safe," I mean that you can expect them to work consistently):
These are what they are called in CSS; you must use these terms.
For the body text on the Web page (e.g. photo captions, navigation links, the main text), choose a classification. The standard choice is sans-serif because it is the easiest to read on a computer screen (while serif is easiest to read in printed material).
Within each classification, you should spec two or three font families, plus the classification generic, to make sure your users do not see an ugly page (which may happen when their system is forced to substitute a font if you failed to name one that they have).
The notation that follows is appropriate for CSS (Cascading Style Sheets) because that is the way we spec fonts for the Web today. If you learned to clutter your HTML with <FONT> tags, it is high time to unlearn that bad practice.
It's important to include the classification generic at the end of the list, as shown in each line above -- that's the way to avoid Web type disasters!
Remember, there are only three type classifications that work reliably on Web pages. Each font in the list for that classification is a member of that classification, e.g. Verdana and Arial are both sans-serif faces. Different operating systems (e.g. Windows and Mac) have different standard fonts installed. Times is not the same as Times New Roman, and Courier is not the same as Courier New.
The user's system will use the first font in the list if it's present. If not, the second font will be used, etc. If none of the named fonts are present, the generic will be used. Not many people spec Palatino, but it is a very pretty serif font, it is installed on almost all Mac systems, and it's more attractive than Times New Roman. Some people like to insert Geneva (another common Mac font) as the second or third font in the sans-serif list. The monospace list is pretty much fixed.
It's not a good idea to get creative with fonts on your Web pages. If you stick to the three specs above, or something quite similar, your pages will look equally good for all your users, regardless of the operating system they use.
My favorite site about typography:
Which fonts are most common?
If you must have an artistic font -- say, for your home page logo -- then make it in Photoshop. Most type images will be smaller files if you save them as GIF files (always use Photoshop's "Save for Web" option to get the best and smallest file). The JPG format often produces some unslightly artifacts around type (even when you use the Matte option).
 |
 |
| GIF | JPG |
The Web design community looks unfavorably on using images for any kind of body text. Doing so runs contrary to all usability standards.
See also CSS (Style Sheets) >>>
Copyright © 2003 by Mindy McAdams