Similar Fonts 

Some fonts are similar enough that they can be considered reasonable alternatives. E.g. Palatino-like fonts include Book Antiqua, Palatino, Palatino Linotype, URW Palladio L, and Zapf Calligraphic:

When using CSS to style text, it is wise to suggest a list of similar fonts to ensure more consistency for different users. For example, if the preferred paragraph font is Palatino:

  p { font-family:Palatino, 'Palatino Linotype', 'Zapf Calligraphic', 'Book Antiqua', 'URW Palladio L', serif; }

Choosing Fonts 

Choosing fonts is frustrating, especially for those used to print media, since there are so few choices: a browser can only use fonts installed on a user’s PC, no font is installed on all PCs, few fonts are commonly installed, and many fonts don’t look good on PC displays. Designers are therefore limited to a paltry few common fonts.

Note : there may be more choice in the future, when browsers are able to temporarily download fonts which are not on users’ PCs. See Downloadable Fonts for more about this.

When suggesting fonts for a web page, several issues must be considered:

Suggest Common Fonts

Suggest common fonts. For sites used within a company, e.g. in an intranet, consider fonts common to the company’s PCs.

Don’t assume that users have the same fonts as you. If you or your client prefers an uncommon font, you can make it the first in a font-family list, but you must remember that many will not have uncommon fonts.

Suggest Alternate Fonts

Suggest alternate fonts to be used for those who do not have your preferred fonts, including fonts for other operating systems; the last font should be a generic font. Check the list of alternate, similar fonts.

Suggest Similar Fonts

If you use different fonts for different types of text, choose similar fonts unless you have a specific reason not to. E.g. if you use Arial for body text, you might reasonably use Arial Narrow or Arial Black for thin or extra-bold text: but you should not also use Trebuchet unless you have a good reason for making its text look quite different.

Choosing different fonts for different types of text is hard, because common fonts are not commonly available in large font families. The only font commonly with a largish family is Arial, which is available on many Windows PCs as Arial, Arial Narrow, Arial Black, and Arial Rounded MT Bold fonts.

As a result, most sites are restricted to a single font for body text, and perhaps a second font for headers.

Suggest Readable Fonts

Suggest fonts that are easy to read. The most readable body fonts on PC displays are plain sans-serif fonts optimized for displays. Many fonts which look good in print don’t look good on displays because display resolutions are too low. Note:

• Fonts may be chosen for headers which are not quite suitable for body text, because headers are bolder and usually bigger, so resolution problems are less acute.

• Suggest scalable fonts — e.g. TrueType or OpenType fonts — not non-scalable fonts, which look bad at most font sizes. Examples of non-scalable Windows fonts are the Microsoft version of Courier (not the same as Courier New), as well as MS Serif and MS Sans Serif.

• Fonts are more readable at higher resolutions, so more fonts become suitable as more people adopt higher resolution displays. But do not assume that everyone has the same resolution as you have: designers tend to have more powerful PCs with higher resolution displays.

• Microsoft’s core web fonts are optimized for displays. The fonts include: Andale Mono, Arial, Arial Black, Comic Sans MS, Courier New, Georgia, Impact, Times New Roman, Trebuchet MS, and Verdana.

• New Vista Font Sizes

  This illustrates the difference in sizes between Arial and the six new Vista fonts (but only if you have the Vista fonts installed):

  Arial : this is a sample of a very brief paragraph created to illustrate differing text sizes.

  Calibri : this is a sample of a very brief paragraph created to illustrate differing text sizes.

  Cambria : this is a sample of a very brief paragraph created to illustrate differing text sizes.

  Candara : this is a sample of a very brief paragraph created to illustrate differing text sizes.

  Consolas : this is a sample of a very brief paragraph created to illustrate differing text sizes.

  Constantia : this is a sample of a very brief paragraph created to illustrate differing text sizes.

  Corbel : this is a sample of a very brief paragraph created to illustrate differing text sizes.

  Microsoft created six new fonts for Vista which can be installed on Windows 2000 and up, and these are likewise optimized for displays. The fonts include: Calibri, Cambria, Candara, Consolas, Constantia, and Corbel. Note : Candara, Constantia, and Corbel have digits with old style descenders, which can look odd, especially in columns of numbers. Caution : a problem for most of these new fonts is that text is not as tall, and is therefore harder to read, than text in more common fonts such as Arial. (At one time this site used Calibri as its preferred font, but some people with Calibri complained that text was too small to read, so Arial was made the preferred font instead.) The difference in sizes is illustrated by the following image, which has ‘a’ in Arial and in each of the six new fonts:
  

• Microsoft’s core web font Verdana is best used for small fonts, and only when Verdana is certain to be installed: small text which is readable in Verdana is often unreadable in other fonts, so if Verdana is not installed, small text may become unreadable.

• Serif, italic, and oblique fonts are poorer at lower resolutions, lower weights, and in smaller character sizes; they suffer from severe aliasing and loss of fine detail, so such fonts must be used cautiously. Exception: Microsoft’s core web font, Georgia, is optimized for web pages and is more readable than typical serif fonts; Georgia is common with Windows and available for Macs.

• A font may be rendered somewhat differently on different PCs, operating systems, or browsers. For example, newer operating systems with LCD displays can display text more clearly than with older operating systems or with CRT displays. Moreover, with most Windows browsers, text is rendered so that it is easier to read, and is therefore crisper; whereas with OS X, text is rendered to more nearly resemble printed text, and is therefore darker. A font that is very readable for one user may therefore be much less readable for another. The difference is illustrated by the following image, which has two examples of normal text, one as it appears in Windows, the other as it appears in OS X:
  

Consider Different Fonts for Printing

Consider specifying different fonts to be used when your pages are printed: e.g. suggest serif fonts by using CSS such as:

@media print { body { font-family:'Times New Roman', Times, serif; } }

Because print resolution is much higher than display resolution, fonts may be specified for printed text which should not be used for displayed text. When printing, therefore, you have more fonts from which to choose.

Consider Fonts with Many Glyphs

Some fonts have more glyphs (characters) than others. You should suggest fonts having all the glyphs you use in sites: many specialized fonts have only a limited range of glyphs. Note: visitors may have older versions of fonts which lack glyphs supported by newer versions: e.g. old versions of Microsoft’s Arial font do not support the Euro character (€). Note : headers typically need a smaller range of characters than body text, so headers may use fonts not suitable for body text.

Downloadable Fonts 

Normally a web page can only use installed fonts: if a page specifies a font that is not installed, the browser will pick another that is. With some browsers, however, it is possible to specify downloadable fonts: i.e., fonts that will be temporarily downloaded to the browser so that a page can use fonts that are not installed.

There are, however, severe constraints to using downloadable fonts, and many incompatibilities among browsers:

• There is a CSS 2 method for suggesting downloadable fonts, using the @font-face directive, but this method has been dropped in CSS 2.1. @font-face is in CSS 3, but CSS 3 has not been released, and browser support is uneven.

• The browsers supporting downloadable fonts include:

  • Netscape 4, which is extinct. It required a proprietary font format, so normal font files could not be used.
  • Internet Explorer 4 and up. It requires a proprietary font format, created using Microsoft’s Web Embedding Fonts Tool, hence normal font files cannot be used. A site favouring IE’s approach is FontEmbedding.com.
  • Chrome 2
  • Firefox 3.5
  • Opera 10
  • Safari 3.1

• Different browsers support different types of font files. Consequently it may be necessary to provide downloadable fonts in several different types of files in order to ensure consistent browser behaviour. For more about this, see Wikipedia: look for the section discussing browser support.

• Fonts are subject to copyright laws, and only certain fonts may legally be redistributed (downloaded).

• The font files take time to download, increasing page load times.

Because not all browsers support downloadable fonts, you must design pages to work even if the fonts can’t be downloaded.

Because different browsers support different kinds of font files, you must supply each font in each format.

Hopefully this situation will improve in the future, but experience suggests that IE’s support will be very far in the future.