Resources > Fonts

This gives information about web fonts:

This also gives information about web fonts, in separate 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. Likewise 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, or when the user has set an option not to use fonts suggested by the page. E.g. Internet Explorer 5-11 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 CSS generic fonts. E.g. even when the user sets the Internet Explorer web page font to Arial, a sans-serif font, the browser may 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 defined generic fonts: serif, sans-serif, cursive, fantasy, and monospace. Your browser’s current generic fonts are shown below:

Standard generic familySample
serif ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789
sans-serif ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789
cursive ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789
fantasy ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789
monospace ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789

Four more generic fonts — system-ui, emoji, math, and fangsong — have been proposed for CSS4 (May 2017), and some modern browsers — Chrome, Opera, and Vivaldi — support system-ui. The proposed generic fonts are shown below, but of course they will appear only if your browser supports the proposed generic fonts:

Proposed generic familySample
system-ui ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789
emoji ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789
math ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789
fangsong ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789

There are two important issues to consider about the generic 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. And second, a fall-back font should be specified for browsers which do not support the proposed generic fonts.

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 their browsers make bad choices.

Proposed Generic Fonts

If you choose to specify a proposed generic font, you should also specify a fall-back font for browsers which do not support the proposed generic fonts.

For example, font-family: system-ui, sans-serif; would select the generic system-ui font if the browser supports that font, but otherwise would select the generic sans-serif font.

Another, more flexible example, is font-family: system-ui, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'San Francisco', 'Lucida Grande', Tahoma, Arial, Helvetica, Univers, 'Liberation Sans', 'Nimbus Sans L', sans-serif;, which selects a user interface font in several versions of Android, Linux, MacOS, and Windows, with fall-backs to common system fonts.

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

Common Fonts 

Each user will have different fonts installed. This lists common fonts, by operating system.

The green checkmarks indicate very common fonts; yellow checkmarks indicate fonts which are somewhat less common.

Font Windows Mac
MacOS
Linux
Unix
2000/XP Vista 7 8 10
serif
Cambria Vista Font Common Font Common Font Common Font Common Font    
Constantia Vista Font Common Font Common Font Common Font Common Font    
Georgia Common Font Common Font Common Font Common Font Common Font Common Font Core Web Font
Palatino Linotype Common Font Common Font Common Font Common Font Common Font    
Times New Roman Common Font Common Font Common Font Common Font Common Font Common Font Core Web Font
Times           Common Font Common Font
sans-serif
Arial Common Font Common Font Common Font Common Font Common Font Common Font Core Web Font
Arial Black Common Font Common Font Common Font Common Font Common Font Common Font Core Web Font
Arial Narrow Common Font Common Font Common Font Common Font Common Font Common Font  
Calibri Vista Font Common Font Common Font Common Font Common Font    
Candara Vista Font Common Font Common Font Common Font Common Font    
Corbel Vista Font Common Font Common Font Common Font Common Font    
Helvetica           Common Font Common Font
Impact Common Font Common Font Common Font Common Font Common Font Common Font Core Web Font
Microsoft Sans Serif Common Font Common Font Common Font Common Font Common Font    
Tahoma Common Font Common Font Common Font Common Font Common Font Common Font  
Trebuchet MS Common Font Common Font Common Font Common Font Common Font Common Font Core Web Font
Verdana Common Font Common Font Common Font Common Font Common Font Common Font Core Web Font
cursive
Comic Sans MS Common Font Common Font Common Font Common Font Common Font Common Font Core Web Font
fantasy
monospace
Andale Mono Common Font Common Font Common Font Common Font Common Font Common Font Core Web Font
Consolas Vista Font Common Font Common Font Common Font Common Font    
Courier           Common Font Common Font
Courier New Common Font Common Font Common Font Common Font Common Font Common Font Core Web Font
Lucida Console Common Font Common Font Common Font Common Font Common Font    

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. Caution : these fonts are smaller than traditional fonts, therefore there is a risk that, if you use them for body text, users will find the text harder to read.

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

Google has collected hundreds of free fonts, some quite good, available using Google’s Font API. Very few visitors to websites will have them installed on their PCs, however, its fonts can be embedded, which makes them available to everyone.

Fonts supplied with Apple’s MacOS are listed in Wikipedia.

Mobile Fonts 

Apple devices generally support a wide variety of fonts, including many fonts found on desktop devices. 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 fonts the default fonts.

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; }

Generic Similar Fonts (in alphabetic order)
serif Palatino: Book Antiqua, Palatino, Palatino Linotype, URW Palladio L, Zapf Calligraphic
Times: CG Times, Liberation Serif, Linux Libertine, Nimbus Roman No9 L, Times, TimesNR, Times New Roman, Tinos
sans-serif Arial: Arial, Arial Unicode MS, Arimo, Fira Sans, Helvetica, Liberation Sans, Microsoft Sans Serif, Nimbus Sans L, Ubuntu, Univers
Arial Narrow: Arial Narrow, Fira Sans Compressed, Fira Sans Condensed, Helvetica Condensed, Liberation Sans Narrow, Ubuntu Condensed, Univers Condensed
Verdana: Bitstream Vera Sans, DejaVu Sans, Input Sans, Lucida Grande, Lucida Sans, Open Sans, Verdana
Avant Garde: Avant Garde, Avantgarde, Century Gothic
Optima: CG Omega, Eterna, Optane, Optima, Opulen, Ottawa, URW Classico, ZapfHumnst BT, Zapf Humanist 601
monospace Courier: Andale Mono, Bitstream Vera Sans Mono, Consolas, Courier, Courier New, Cousine, DejaVu Sans Mono, Fira Code, Fira Mono, Hack, Inconsolata, Input Mono, Liberation Mono, Lucida Console, Nimbus Mono, Source Code Pro, Ubuntu Mono

Note : one way to determine whether fonts are similar is to determine whether the fonts have similar metrics, e.g. similar widths and x-heights. Certain font metrics are reported in Resources > Font Metrics.

Note : it is often useful to suggest fonts similar to Arial, Verdana, and Times New Roman. Some of these are depicted in Resources > Fonts Like Arial, Verdana, and Times New Roman.

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 for thin body text: but you should not also use Trebuchet for body text unless you have a good reason for making its text look quite different.

Note : one way to determine whether fonts are similar is to determine whether the fonts have similar metrics, e.g. similar widths and x-heights. Certain font metrics are reported in Resources > Font Metrics.

Note : it is often useful to suggest fonts similar to Arial, Verdana, and Times New Roman. Some of these are depicted in Resources > Fonts Like Arial, Verdana, and Times New Roman.

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 may not look good on displays because many display resolutions are too low. Note:

Coping with DirectWrite Issues 

With operating systems that support DirectWrite, certain fonts named in the CSS font-family list which are narrower, wider, lighter, darker, or styled differently than normal are ignored, just as if the fonts were not installed. This can happen, for example, with Arial Narrow and Arial Black.

DirectWrite may be used on Windows 7 (and later) by Chrome 37 (and later), Edge (all versions), Internet Explorer 9 (and later), Firefox 4 (and later), Opera 24 (and later), and Vivaldi (all versions). Legacy versions of browsers may offer options to disable DirectWrite, but AFAIK modern versions do not.

DirectWrite issues may appear with certain variants of Arial, Arial Special G1, Arial Special G2, Berlin Sans FB, Calibri, DejaVu Sans, DejaVu Serif, Eras ITC, Franklin Gothic, Garth Graphic ATT, Nadianne ATT, Rockwell, Segoe UI, Shannon ATT, Univers — and many more.

To increase the likelihood that all browsers will render fonts as expected, (a) use the CSS font-family property to specify both the specific font and its font family (e.g. font-family:'Arial Narrow', Arial;), (b) use the CSS font-stretch property to specify narrower or wider text (e.g. font-stretch:condensed;), and (c) use the CSS font-weight property to specify lighter or darker text (e.g. font-weight:bold;). Note, however, that even with correct CSS, some browsers may not render different fonts differently: e.g., this author found that Chrome, Firefox, Opera, and Vivaldi wrongly rendered Segoe UI Light and Segoe UI Semilight the same, whereas Microsoft Edge and Internet Explorer correctly rendered them differently.

Caution : there is a serious problem, however, with the solution described in the previous paragraph. A font family can include more variations than can be expressed using CSS. For example, the Fira Sans font comes in 11 different condensed weights, 9 extra condensed weights, 10 compressed weights, and 11 normal weights, as seen in the table below (though it is true that Fira Sans Extra Condensed fonts are very nearly the same size and weight as Fira Sans Compressed fonts, so both sets are not really needed): however, CSS allows only 9 font weights (100, 200, 300, 400, 500, 600, 700, 800, 900), so it is absolutely impossible to select all the possible weights using CSS; worse, it would only be possible to determine which 9 weights CSS will select by trial and error; and worse, different browsers may do so differently. In practice this probably means that only a paltry few of the weights can be used.

Condensed FontsExtra Condensed FontsCompressed FontsNormal Width Fonts
Fira Sans Condensed ThinFira Sans Extra Condensed ThinFira Sans Compressed ThinFira Sans Thin
Fira Sans Condensed Ultra Light Fira Sans Compressed Ultra LightFira Sans Ultra Light
Fira Sans Condensed Extra LightFira Sans Extra Condensed Extra LightFira Sans Compressed Extra LightFira Sans Extra Light
Fira Sans Condensed LightFira Sans Extra Condensed LightFira Sans Compressed LightFira Sans Light
Fira Sans Condensed Semi LightFira Sans Extra CondensedFira Sans Compressed Semi LightFira Sans Semi Light
Fira Sans Condensed MediumFira Sans Extra Condensed MediumFira Sans Compressed MediumFira Sans Medium
Fira Sans Condensed Semi BoldFira Sans Extra Condensed SemiBoldFira Sans Compressed Semi BoldFira Sans Semi Bold
Fira Sans Condensed BoldFira Sans Extra Condensed BoldFira Sans Compressed BoldFira Sans Bold
Fira Sans Condensed Extra BoldFira Sans Extra Condensed Extra BoldFira Sans Compressed Extra BoldFira Sans Extra Bold
Fira Sans Condensed Heavy Fira Sans Compressed HeavyFira Sans Heavy
Fira Sans Condensed UltraFira Sans Extra Condensed Black Fira Sans Ultra

Following are examples — using the Arial, Berlin Sans FB, Calibri, Eras ITC, Franklin Gothic, Rockwell, and Segoe UI font families (and, for lagniappe, two other Segoe fonts!) — showing how to cope with DirectWrite issues. The examples work, of course, only if the fonts are installed.

Arial 
For Arial Narrow, use the CSS
font-family:'Arial Narrow', Arial, sans-serif; font-stretch:condensed; font-weight:normal;
For Arial Narrow Bold, use the CSS
font-family:'Arial Narrow', Arial, sans-serif; font-stretch:condensed; font-weight:bold;
For Arial, use the CSS
font-family:Arial, sans-serif; font-stretch:normal; font-weight:normal;
For Arial Bold, use the CSS
font-family:Arial, sans-serif; font-stretch:normal; font-weight:bold;
For Arial Black, use the CSS
font-family:'Arial Black', Arial, sans-serif; font-stretch:normal; font-weight:900;
Berlin Sans FB 
For Berlin Sans FB, use the CSS
font-family:'Berlin Sans FB', sans-serif; font-stretch:normal; font-weight:normal;
For Berlin Sans FB Demi, use the CSS
font-family:'Berlin Sans FB Demi', 'Berlin Sans FB', sans-serif; font-stretch:normal; font-weight:600;
For Berlin Sans FB Bold, use the CSS
font-family:'Berlin Sans FB', sans-serif; font-stretch:normal; font-weight:bold;
Calibri 
For Calibri Light, use the CSS
font-family:'Calibri Light', Calibri, sans-serif; font-stretch:normal; font-weight:100;
For Calibri, use the CSS
font-family:Calibri, sans-serif; font-stretch:normal; font-weight:normal;
For Calibri Bold, use the CSS
font-family:Calibri, sans-serif; font-stretch:normal; font-weight:bold;
Eras ITC 
For Eras Light ITC, use the CSS
font-family:'Eras Light ITC', 'Eras ITC', sans-serif; font-stretch:normal; font-weight:100;
For Eras Medium ITC, use the CSS
font-family:'Eras Medium ITC', 'Eras ITC', sans-serif; font-stretch:normal; font-weight:normal;
For Eras Demi ITC, use the CSS
font-family:'Eras Demi ITC', 'Eras ITC', sans-serif; font-stretch:normal; font-weight:600;
For Eras Bold ITC, use the CSS
font-family:'Eras Bold ITC', 'Eras ITC', sans-serif; font-stretch:normal; font-weight:bold;
For Eras Ultra ITC, use the CSS
font-family:'Eras Ultra ITC', 'Eras ITC', sans-serif; font-stretch:normal; font-weight:900;
Franklin Gothic 
For Franklin Gothic Medium Condensed, use the CSS
font-family:'Franklin Gothic Medium Cond', 'Franklin Gothic', sans-serif; font-stretch:condensed; font-weight:normal;
For Franklin Gothic Demi Condensed, use the CSS
font-family:'Franklin Gothic Demi Cond', 'Franklin Gothic', sans-serif; font-stretch:condensed; font-weight:600;
For Franklin Gothic Medium, use the CSS
font-family:'Franklin Gothic Medium', 'Franklin Gothic', sans-serif; font-stretch:normal; font-weight:normal;
For Franklin Gothic Demi, use the CSS
font-family:font-family:'Franklin Gothic Demi', 'Franklin Gothic', sans-serif; font-stretch:normal; font-weight:600;
For Franklin Gothic Heavy, use the CSS
font-family:'Franklin Gothic Heavy', 'Franklin Gothic', sans-serif; font-stretch:normal; font-weight:900;
Rockwell 
For Rockwell Condensed, use the CSS
font-family:'Rockwell Condensed', 'Rockwell', serif; font-stretch:condensed; font-weight:normal;
For Rockwell Condensed Bold, use the CSS
font-family:'Rockwell Condensed', 'Rockwell', serif; font-stretch:condensed; font-weight:bold;
For Rockwell, use the CSS
font-family:Rockwell, serif; font-stretch:normal; font-weight:normal;
For Rockwell Bold, use the CSS
font-family:Rockwell, serif; font-stretch:normal; font-weight:bold;
For Rockwell Extra Bold, use the CSS
font-family:'Rockwell Extra Bold', Rockwell, serif; font-stretch:normal; font-weight:900;
Segoe UI (and two other Segoe fonts)
For Segoe UI Light, use the CSS
font-family:'Segoe UI Light', 'Segoe UI', sans-serif; font-stretch:normal; font-weight:100;
For Segoe UI Semilight, use the CSS
font-family:'Segoe UI Semilight', 'Segoe UI', sans-serif; font-stretch:normal; font-weight:300;
For Segoe UI, use the CSS
font-family:'Segoe UI', sans-serif; font-stretch:normal; font-weight:normal;
For Segoe UI Semibold, use the CSS
font-family:'Segoe UI Semibold', 'Segoe UI', sans-serif; font-stretch:normal; font-weight:600;
For Segoe UI Bold, use the CSS
font-family:'Segoe UI', 'Segoe UI', sans-serif; font-stretch:normal; font-weight:bold;
For Segoe UI Black, use the CSS
font-family:'Segoe UI Black', 'Segoe UI', sans-serif; font-stretch:normal; font-weight:900;
For Segoe Print, use the CSS
font-family:'Segoe Print', cursive;
For Segoe Script, use the CSS
font-family:'Segoe Script', cursive;

Some experimentation may be required, since browsers may exhibit DirectWrite issues with some fonts, but not with others, and since different values of font-family, font-stretch, and font-weight may be necessary to get the desired results.

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