Resources > Fonts

This gives information about fonts in web pages.

Note : this page uses the word font for what is more correctly termed a font family. E.g., this page uses “Arial font” to refer to all members of the Arial font family, in all its sizes, weights, and variations; and this page uses “generic font” for the term “generic font family” which appears in CSS specifications.

User Default Fonts 

Browsers typically let users pick fonts to be used when pages do not suggest fonts using either CSS or <font>, or when the user has set an option not to use fonts suggested by the page.

E.g. IE 5-10 let users pick two fonts: a web page font, for proportional text, and a plain text font, for monospace text.

With many browsers these fonts may be different from the 5 CSS generic fonts. E.g. even if the user sets the IE web page font to Arial, a sans-serif font, the browser does not set the CSS generic sans-serif font to Arial.

Generic Fonts 

When using the CSS font-family property to style text, there are five generic fonts: serif, sans-serif, cursive, fantasy, and monospace. Your browser’s current generic fonts are shown below:

Generic familySample
serif ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789
sans-serif ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789
cursive ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789
fantasy ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789
monospace ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789

There are three important issues to consider about these fonts. First, the user’s browser will pick an installed font for each generic font, but may not let the user change what it picks, even if the browser makes a poor choice. Second, a CSS rule may name a list of a fonts, with the first installed font in the list being used, so different users may see pages with different fonts. And third, there are several ways for designers to suggest fonts to be used in a page, each with advantages and disadvantages.

Let’s consider each of these issues.

Selecting Installed Fonts as Generic Fonts

The user’s browser will pick an installed font for each generic font. E.g., one user’s browser might choose Arial as the generic sans-serif font, and another user’s browser might choose Luxi Sans.

Unfortunately, a browser may choose a font which is unsuitable, or even unreadable. Users should therefore be able to change their generic fonts; but many browsers, sadly, won’t let users do so:

Note : designers should avoid specifying the cursive and fantasy generic fonts, especially the latter, since it is more likely that the browser will pick unsuitable generic fonts, and most users can’t change them if the browser makes a bad choice.

CSS List of Fonts

A CSS rule may specify a list of a fonts, including a generic font. E.g.:

Caution : the browser might not use one of the suggested fonts, even if it is installed. E.g., the user may have set an option to disable styles, to use an alternate stylesheet, or to make the browser more friendly to the disabled.

Caution : do not list a non-scalable font, e.g. a raster font. Use scalable fonts — e.g. TrueType or OpenType fonts — instead. Non-scalable fonts look bad at most font sizes.

Caution : do not list the Courier font before the Courier New font. Windows may have a non-scalable Courier font, so listing Courier first can result in ugly text on Windows systems. List Courier New first.

Suggesting Fonts

There are four ways for designers to suggest which fonts are to be used in a page:

Sometimes a combination of the above techniques makes sense. E.g., if the site is for a company which prefers a particular font, but this font is not easy to read in body text sizes, it may make sense to use the company’s preferred font for headings, but to use a more readable font for body text. An example is this hockey association’s site.

Common Fonts 

Each user will have different fonts installed. This lists common fonts, by operating system, plus those which are embeddable:

Font Windows Mac
OS X
Linux
Unix
Embed
2000/XP Vista/7
serif
Cambria Vista Font Common Font      
Cardo         Common Font
Constantia Vista Font Common Font      
Crimson Text         Common Font
Droid Serif         Common Font
Georgia Common Font Common Font Common Font Core Web Font  
IM Fell DW Pica         Common Font
OFL Sorts Mill Goudy TT         Common Font
Old Standard TT         Common Font
Palatino Linotype Common Font Common Font      
Times New Roman Common Font Common Font Common Font Core Web Font  
Times     Common Font Common Font  
Vollkorn         Common Font
sans-serif
Arial Common Font Common Font Common Font Core Web Font  
Arial Black Common Font Common Font Common Font Core Web Font  
Arial Narrow Common Font Common Font Common Font    
Calibri Vista Font Common Font      
Cantarell         Common Font
Candara Vista Font Common Font      
Corbel Vista Font Common Font      
Droid Sans         Common Font
Helvetica     Common Font Common Font  
Impact Common Font Common Font Common Font Core Web Font  
Josefin Sans Std Light         Common Font
Microsoft Sans Serif Common Font Common Font      
Molengo         Common Font
Nobile         Common Font
Tahoma Common Font Common Font Common Font    
Trebuchet MS Common Font Common Font Common Font Core Web Font  
Verdana Common Font Common Font Common Font Core Web Font  
Yanone Kaffeesatz         Common Font
cursive
Comic Sans MS Common Font Common Font Common Font Core Web Font  
Lobster         Common Font
Reenie Beanie         Common Font
Tangerine         Common Font
fantasy
           
monospace
Andale Mono Common Font Common Font Common Font Core Web Font  
Consolas Vista Font Common Font      
Courier     Common Font Common Font  
Courier New Common Font Common Font Common Font Core Web Font  
Droid Sans Mono         Common Font
Inconsolata         Common Font
Lucida Console Common Font Common Font      

The green checkmarks indicate very common fonts; yellow checkmarks indicate fonts which are somewhat less common; orange checkmarks indicate embeddable fonts which may not be common today, but which likely will become more common as time goes on.

Until Aug 2002 Microsoft made its Core Web Fonts freely available in Windows and Mac formats; the fonts could also be installed on Unix and Linux systems. Up-to-date Core Web Fonts, sadly, are now legally available only with various Microsoft products, but old versions are legally available elsewhere.

Microsoft has a new set of 6 excellent fonts for Vista and Office 2007 that are sure to be popular, but since they are not freely available for legacy systems or for non-Windows systems, those who want to tightly control the appearance of web pages are less likely to use them. Note : you can legally get these fonts for Windows 2000 and XP by installing certain free Microsoft software, e.g. PowerPoint Viewer 2007.

Microsoft offers a resource to find out what fonts come with their products, though sadly it is not kept up-to-date. For Vista, a list of Vista fonts is available elsewhere.

Apple has lists of the fonts that come standard with OS X 10.3 (Panther), OS X 10.4 (Tiger), and OS X 10.5 (Leopard). There is also a non-Apple source with a list of fonts in OS X 10.6 (Snow Leopard).

Google released a set of open source embeddable fonts, listed here in the “Embed” column.

Mobile Fonts 

Apple devices generally support a wide variety of fonts, including many fonts found on desktop devices: for example as listed here. Other mobile devices tend to support a very small, idiosyncratic range of fonts.

For mobile devices, text clarity is especially important, and makers of mobile devices have gone to a lot of effort to create generic fonts which are especially clear on their devices. For this reason it is generally best to make the generic sans-serif font the default font family.

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:

Generic Similar Fonts
serif Palatino: Book Antiqua, Palatino, Palatino Linotype, URW Palladio L, Zapf Calligraphic
Times: CG Times, Nimbus Roman No9 L, Times, TimesNR, Times New Roman
sans-serif Arial: Arial, Arial MT, Arial Unicode MS, Helvetica, Nimbus Sans L, Univers
Arial Narrow: Arial Narrow, Helvetica Condensed, Univers Condensed
Avant Garde: Avant Garde, Avantgarde, Century Gothic
Optima: Optima, CG Omega, Zapf Humanist
monospace Courier: Courier, Courier New, Nimbus Mono L
Andale Mono, Monotype.com

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:

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

 

 Top of Page   Legal Notices