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 which are installed on a user’s PC (or are embeddable), 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 if embeddable fonts become more common, and more commonly supported. See Embeddable (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.

• 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 barely readable in Verdana is usually unreadable in other fonts.

• 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 also optimized for displays. The fonts are: 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 smaller, 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 many people complained that the text was too small to read. The difference in sizes is illustrated by the following image, which has ‘a’ in Arial and in each of the six new fonts:
  

• 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.

Embeddable (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 embeddable (downloadable) fonts: i.e., fonts that will be temporarily downloaded to the browser so that a page may use fonts which are not installed.

There are, however, constraints to using downloadable fonts:

• 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 the browsers which support @font-face honour somewhat different font file formats.

  Modern browsers supporting downloadable fonts, and the font formats they support, include:

  • Internet Explorer: version 4 (and up) supports EOT; IE9 will likely support WOFF.
  • Chrome 4: version 4 (and up) supports TTF and SVG; a future version will support WOFF.
  • Firefox: version 3.5 (and up) supports TTF and OTF; version 3.6 (and up) also supports WOFF.
  • Opera: version 10 (and up) supports TTF, OTF, and SVG; a future version may support WOFF.
  • Safari: version 3.1 (and up) supports TTF, OTF, and SVG.

  Mobile browsers may be more limited. And even if a mobile browser supports embeddable fonts, using such fonts will increase the amount downloaded to mobile devices, which will impair performance and may increase user costs. Recommendation: use media queries to ensure that mobile devices will not see CSS specifying embeddable fonts.

• Because different browsers support different types of font files, it may be necessary to provide downloadable fonts in several formats to ensure consistent browser behaviour: this may change if the browser makers agree on a standard format. For more about this, see Wikipedia: look for the section discussing browser support.

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

• Some fonts which look good when printed will look bad when displayed, especially in the smaller font sizes found in body text, so many embeddable fonts will realistically work well only in header text.

• The font files take time to download, increasing page load times. Some font formats are bulkier than others: for example, Microsoft’s Book Antiqua and Arial fonts in their four major permutations — normal, bold, italic, italic bold — total about 0.6M and 1.1M respectively.

• Font files which are smaller may lack characters which are common in other fonts.

• The time needed to download font files is worse for certain browsers which download all downloadable fonts named in stylesheets, even when not all these fonts are used on a given page.

• The time needed to download font files is a more serious problem for mobile browsers, especially for users who must pay for the amount downloaded.

• Different browsers render pages differently when font files have not yet been downloaded: e.g. some may display blanks for text until the font files are downloaded; some may display text in a default font and change the font after the font is downloaded. Either behaviour can be disconcerting.

• Because not all browsers support downloadable fonts, you must design pages to work even if the fonts can’t be downloaded: but if pages work fine without the downloadable fonts, why use such fonts at all?

  The answer to this question is “for all the same reasons as fonts are carefully chosen in print media”, but with two critical restrictions: first, font download times must be considered; and second, when visitors need to quickly scan text, as they so often must, the priority must be to use fonts in which text is easy to read, i.e. fonts optimized for rendering on a display device.

There might be less need for downloadable fonts if there were a common, free, rich set of fonts which all users had: but this is unlikely in the near future.

Hopefully this situation will improve in the future, but experience suggests that IE will lag behind other browsers.