Resources ⮞ Font Choices

This page offers information about choosing fonts, including choosing embedded (downloaded) fonts.

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 em­bedded), no font is installed on all PCs, few are common­ly installed, and many don’t look good on PC displays. Website designers are therefore limited to a paltry few fonts.

Note : using embedded fonts adds many more choices; see Choosing Embedded (Downloaded) Fonts for more about this.

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

Suggest Flexible Fonts 

You should choose fonts which come in a good variety of weights and (ideally) widths.

For body fonts, this author prefers fonts which come in normal, semi-bold, and bold weights, in normal and con­densed widths.

For header fonts this author prefers font families which come in bold and black weights — and even better, in extra-bold weights — in normal and expanded widths, and in small caps. And, of course, the body and header fonts must complement each other.

Unfortunately few installed or free embedded fonts meet these desiderata. Many fonts come in only two weights, normal and bold; and when a regular font comes in more than two weights, any con­densed counterpart generally come in fewer weights. For example, Open Sans comes in five rich weights, but Open Sans Condensed comes in only two poor weights. And expanded fonts are very, very rare.

$ Many exceptionally flexible fonts may be purchased, including rich extended font families of fonts common with Windows and MacOS. For example, greatly expanded versions of the standard Windows fonts Arial, Georgia, Times New Roman, and Verdana are available with more widths and weights than available with the Windows versions. Unfortu­nately, the costs of for-pay fonts preclude their use unless the client is willing to pay the price.

Exceptionally flexible free sans-serif fonts include Barlow, Cabin, Encode Sans, Fira Sans, and Saira, to a lesser degree Archi­vo, and to a still lesser degree, Roboto.

Flexible free serif fonts include Oregon LDO, Martel, Spec­tral, Taviraj, and Trirong.

You should especially consider use of the free fonts listed in Recommended Free Fonts, and also the free Google fonts, which include good alternatives to common Win­dows and MacOS fonts.

Consider Fonts with Many Characters 

Some fonts have more characters than others. You should suggest fonts having all the characters you use in sites: many specialized fonts have only a limited range of characters. Note : visitors may have older versions of fonts which lack char­acters supported by newer versions: e.g. very old versions of Microsoft’s Arial font don’t 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.

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 won’t have uncommon 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 shouldn’t 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 ⮞ Fonts ⮞ Font Metrics.

Note : some fonts that are similar to each other are depicted in Resources ⮞ Fonts ⮞ Font Sets.

Choosing different fonts for different types of text is hard, because common fonts are not commonly available in large font families. The only common font commonly found 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, and sometimes as Arial Nova and Arial Nova Condensed fonts.

As a result, many sites are restricted to a handful of fonts.

Suggest Readable Fonts 

Suggest fonts that are easy to read. The most legible body fonts on PC displays are sans-serif fonts optimized for displays. Many fonts which look good in print may not look good on displays because many display reso­lutions are too low. Note:

The Perils of Large Font Families 

There are problems with fonts which belong to large font families: a font family can have more variations than can be selected 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

The various varieties of font weights available are listed in Resources ⮞ Fonts ⮞ Possible Weights.

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 Vista SP2 (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 op­tions to disable DirectWrite, but modern versions don’t.

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 modern versions of Chrome, Firefox (prior to FF57), Opera, SeaMonkey, and Vivaldi wrongly rendered Segoe UI Light and Segoe UI Semilight the same, whereas Edge, Internet Explorer, and Firefox (starting with FF57) correctly rendered them differently.

Note : to ensure that the CSS works when DirectWrite is not enabled, it is critical to correctly name the specific font; for example, in font-family:'Franklin Gothic Medium Cond', 'Franklin Gothic', sans-serif; it is critical that the specific font truly is named Franklin Gothic Medium Cond. Getting the name right can be hard, because Windows offers no clear way to determine the real font name: it often implies false font names, e.g. implies that the name of the Franklin Gothic Medium Condensed font is Franklin Gothic Cond Medium. This author has found that the easiest way to ensure that the specific font name is correct is to use the font names in the list of fonts in the usually reliable Universal Character Map, available from the Microsoft App Store, or in the dp4 Font Viewer.

Note : this author has found no way to write text onto a <canvas> whose font must be selected by font-stretch. The context.fillText() method can write text whose font can be selected by a combination of font-style, font-variant, font-weight, font-size and font-family, but not text whose font must be partly selected by font-stretch.

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.

Suggest Alternate Fonts in a Font Stack 

Suggest alternate fonts in a CSS font-family list (alias a font set or font stack) as discussed above. The font stack should include:

Hence, for example:

font-family:'Century Gothic', Helvetica, Arial, Arimo, 'Fira Sans', sans-serif;

Which in a bold font weight produces:

A quick brown fox jumps over the lazy dog

Most sites will require several font stacks: one for header text, a second for normal body text, perhaps a third for narrow body text, perhaps another for menus, perhaps more. This site has 4 font stacks for most text, plus 12 font stacks for very specialized text. Examples of the specialized text include fancy ampersands like ‘ & ’ used in titles, and the cursive ‘e’ used in ‘eBook’. The font stacks are listed in Resources ⮞ Colophon.

Important Note : any character you use must be in one of the installed or embedded fonts in the applicable font stack.

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 : don’t 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. Note : related to this, don’t 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 before Courier.

Caution : at all times, you must know about Coping with DirectWrite Issues, and must therefore be prepared to specify both the specific font (e.g. Arial Black) and the font family (e.g. Arial), as well as suitable combinations of font-stretch and font-weight.

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 shouldn’t be used for displayed text. When printing, therefore, you have more fonts from which to choose.

Choosing Embedded (Downloaded) Fonts 

Using embedded fonts greatly expands the choices of fonts which may be used in a website.

Note : to learn how to specify embedded fonts, go here.

Embedded fonts are downloaded from a host the first time they are referenced, which adds to the page load time, but the fonts are usually compressed, which minimizes the added time, and the fonts are cached by the browser, so they need not be down­loaded again with subsequent pages.

There are constraints to using embedded 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.

See Using Embedded Fonts to learn how to specify embedded fonts.

 

 Top of Page         Legal Notices