Resources > Fonts
This gives information about fonts in web pages.
- User Default Fonts
- Generic Fonts
- Common Fonts
- Similar Fonts
- Choosing Fonts
- Downloadable Fonts
- Samples of Fonts
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-7 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 are different from the 5 CSS generic fonts, discussed below. 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 family | Sample |
|---|---|
| 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 specify 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:
- Some browsers enable ordinary users to override the browsers’ choices using easy-to-use commands. Examples of such browsers are Mozilla and Opera.
- Some browsers enable technically inclined users to override the browsers’ choices by editing obscure configuration data. An example of such a browser is Firefox, using its arcane about:config page.
- Some browsers either do not let users choose, or let users choose to only a limited extent. Examples of such browsers are IE and Safari. Forcing such a browser to use a sensible font can be an exercise in frustation. One approach is to (1) identify the font selected (which can be hard), (2) uninstall that font without deleting its font files, (3) close and reöpen the browser, which makes the browser choose a different (and hopefully better) font, (4) reïnstall the font which was uninstalled, then (5) pray that the browser does not revert to the bad font.
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.:
p { font-family: serif; }In this example the CSS lists only the generic serif font, and this is what will be used.
p { font-family: 'Times New Roman', Times, serif; }In this example the CSS lists two named fonts, then a generic font. If Times New Roman is installed, it is used; otherwise if Times is installed, it is used; otherwise the generic serif font is used.
p { font-family: 'Times New Roman', Times; }This is the same as the previous example except that no generic font is listed: if the named fonts are not installed, the browser could use any font. Although this is valid CSS, designers should not do this: results are too uncertain.
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:
The designer can use the <font> tag.
This is deprecated, and it is less capable than other methods; don’t use <font>.
The designer can suggest no fonts at all.
In this case the page uses the user default fonts. This gives the user the greatest control over how pages are rendered, so it is a good approach if the fonts are unimportant to the design.
An example is this concept site.
The designer can use CSS to suggest generic fonts, e.g. using
font-family:sans-serif;.This gives the user more control over how pages look if the browser lets the user pick the generic fonts.
An example is this author’s business site.
The designer can use CSS to suggest a list of fonts, e.g. using
font-family:Arial, Helvetica, sans-serif;.This gives the designer more control over how pages look; this can make pages more attractive and easier to read; and this can help to make pages look much the same for different users; but it reduces the user’s ability to choose. Note : it is important to suggest a list of similar fonts — e.g.
Arial, Helvetica, sans-serif— to ensure more consistent results; thus, in this example, if Arial is installed, it is used; otherwise, if Helvetica — a font similar to Arial — is installed, it is used; otherwise the generic sans-serif font is used.An example is the Browser News site.
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. These fonts are common:
| Generic | Font | Windows 2000/XP |
Windows Vista |
Mac OS X |
Linux Unix |
|---|---|---|---|---|---|
| serif | Cambria |  |
 |
||
| Constantia | |
|
|||
| Georgia | |
|
|
 |
|
| Palatino Linotype | |
|
|||
| Times New Roman | |
|
|
|
|
| Times | |
|
|||
| sans-serif | Arial | |
|
|
|
| Arial Black | |
|
|
|
|
| Arial Narrow | |
|
|
||
| Calibri | |
|
|||
| Candara | |
|
|||
| Corbel | |
|
|||
| Helvetica | |
|
|||
| Impact | |
|
|
|
|
| Microsoft Sans Serif | |
|
|||
| Tahoma | |
|
|
||
| Trebuchet MS | |
|
|
|
|
| Verdana | |
|
|
|
|
| cursive | Comic Sans MS | |
|
|
|
| fantasy | |||||
| monospace | Andale Mono | |
|
|
|
| Consolas | |
|
|||
| Courier | |
|
|||
| Courier New | |
|
|
|
|
| Lucida Console | |
|
The green checkmarks indicate very common fonts; yellow checkmarks indicate Microsoft Core Web Fonts which are somewhat less common for some operating systems; orange checkmarks indicate Vista fonts which may be installed in some older versions of Windows.
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 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 97 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 : it has been reported that you can legally get these fonts for Windows 2000 and up 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).
Information is available about how common various fonts are; its accuracy is unknown.
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 |
Note : a long but not exhaustive list of similar fonts is available.
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. Browsers are limited to fonts installed on a user’s PC, and there are no fonts which all users have — indeed, few fonts which most have — and many fonts which look good in print look bad on monitors: hence designers are 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’s PCs. See Downloadable Fonts for more about this.
When suggesting fonts for a web page, several issues must be considered:
Suggest Similar Fonts
Choose from a set of similar fonts unless you have a specific reason for using unlike fonts. 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 different.
Exception : as with print media, header fonts may be different, as this helps make header and body text distinct. In this site, headers use a bold, italic, serif font; whereas body text uses a sans-serif font.
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 your users have the same fonts as you. If you or your client prefers an uncommon font, you can make it the first in the list of fonts, but then list common fonts.
Suggest Alternate Fonts
Suggest alternate fonts to be used for those who do not have your preferred fonts; the last font should be a generic font. Check the list of alternate, similar fonts.
Suggest Readable Fonts
Suggest fonts that can be easily read. The most readable body fonts on PC displays are plain sans-serif fonts optimized for displays. Many fonts that look good in print do not look good on monitors because, to look good, the fonts would need a much higher resolution. Note:
- Fonts may be chosen for headers which are not quite suitable for body text, because headers are bolder and 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, 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 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.
- 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 operating systems or by different browsers. For example, newer operating systems with LCD displays can display text more clearly than older operating systems or CRT displays. Moreover, with most Windows browsers, text displayed is made easier to read, whereas with OS X and Safari, text is made more like printed fonts. A font that is very readable for one user may therefore be much less readable for another.
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; } }.
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 (see §15.3.5 of the CSS2 spec), but this method has been dropped in CSS 2.1. The method is in CSS 3, but browsers don’t support CSS 3 to any significant degree.
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.
The only browsers supporting downloadable fonts are:
- 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.
- Opera (unreleased version)
- Safari 3.1 and up.
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.