Fonts Choices

Error: JavaScript is needed to render this site: please enable it.

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 many limitations: 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; few come in a good variety of widths and weights; and many don’t look good on PC displays. This severely constrains a designer’s choices.

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

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, preferably with italic faces.

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, condensed, and expanded widths, and with small caps. And, of course, the body and header fonts must comple­ment 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 counterparts generally come in fewer weights. And expanded fonts are very, very rare.

$ Many exceptionally flexible fonts may be purchased, in­cluding many varieties of fonts common with Windows and MacOS. For example, greatly expanded ver­sions 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­nate­ly, for-pay fonts can be very expensive.

Exceptionally flexible free sans-serif fonts include Argentum Novus, Argentum Sans, Assailand, Avrile Sans, Avrile Sans Condensed, Barlow, Bert Sans, Cabin, Avrile Sans, Cheyenne Sans, Cheyenne Sans Novus, Elaine Sans, Encode Sans, Encode Sans Condensed, Encode Sans Expanded, Encode Sans Semi Condensed, Encode Sans Semi Expanded, Ezarion, Fira Sans, Gothic A1, Grenze, IBM Plex Sans, Inter, Libre Franklin, Linik Sans, Manix Sans HL, Metropolis, Morrison, Noto Sans, Noto Sans Display, Public Sans, Raleway, Readiness, Rising Sun, Robert Sun, Roboto, Rosa Sans, Saira, Saira Condensed, Saira Extra Condensed, Saira Semi Condensed, SF UI Display, Spartan, Squarion, Transpass, Trujillo, Verano Sans, and Zapus Sans

Flexible free serif fonts are rarer, including Avrile Serif, IBM Plex Serif, Oregon LDO, Mar­tel, Noto Serif, Noto Serif Display, Spec­tral, Taviraj, and Trirong.

Important: you should especially consider the many free Squir­rel, Google, and Font Library fonts as em­bedded 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. NB​: 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 (€). NB​: 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.

NB​: 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 Fonts Font Metrics.

NB​: some fonts that are similar to each other are depicted in 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:

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, 1 use the CSS font-family property to specify both the specific font and its font family (e.g. font-family:'Arial Narrow', Arial;), 2 use the CSS font-stretch property to specify narrower or wider text (e.g. font-stretch:condensed;), and 3 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.

NB​: to ensure that the CSS works when DirectWrite is not enabled, it’s critical to correctly name the specific font; for exam­ple, in font-family:'Franklin Gothic Medium Cond', 'Franklin Gothic', sans-serif; it’s 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 Con­densed 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 or the dp4 Font Viewer.

NB​: 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 and the related Selawik font!) — 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;
Selawik (A Segoe UI Replacement)
For Selawik Light, use the CSS
font-family:'Selawik Light', 'Selawik', sans-serif; font-stretch:normal; font-weight:100;
For Selawik Semilight, use the CSS
font-family:'Selawik Semilight', 'Selawik', sans-serif; font-stretch:normal; font-weight:300;
For Selawik, use the CSS
font-family:'Selawik', sans-serif; font-stretch:normal; font-weight:normal;
For Selawik Semibold, use the CSS
font-family:'Selawik Semibold', 'Selawik', sans-serif; font-stretch:normal; font-weight:600;
For Selawik Bold, use the CSS
font-family:'Selawik', 'Selawik', sans-serif; font-stretch:normal; font-weight:bold;

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', 'Fira Sans', Helvetica, Arial, Arimo, sans-serif;

Which, in a bold font weight, produces:

A quick brown fox jumps over the lazy dog

Because Windows Chrome-based browsers display text which is paler — and therefore harder to read — than other browsers, you should give priority to Windows fonts which are darker, and therefore easier to read. Here are samples of common Windows sans-serif fonts, in Chrome and in Firefox, to help you pick darker fonts:

Chrome sample    Firefox sample

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 glyph you use must be in one of the installed or embedded fonts in the applicable font stack. This es­pecially applies to unusual glyphs, such as the pointing hand at the start of this note, since many fonts lack such glyphs. Excep­tion: the browser may also look for the glyph in fonts not listed in the font stack; e.g. Windows will look for glyphs in the Arial or Times New Roman fonts if Helvetica or Times is in the font stack; e.g. Windows 10 (and probably older versions of Windows) will look for glyphs which are symbols or emoji in special Windows fonts such as Segoe UI Emoji; e.g. the browser may look for glyphs in common fonts such as Times New Roman; but these exceptions cannot be depended on, as such behaviour is user-, browser-, and operating-system-dependent.

Caution: the browser might not use one of the suggested fonts, even if it’s 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 non-scalable fonts, e.g. a raster font. Use scalable fonts — e.g. TTF (TrueType) or OTF (OpenType) fonts — instead. Non-scalable fonts look bad at most font sizes. NB: related to this, don’t list Courier before Courier New; Win­dows may have a non-scalable Courier font, so listing Courier first can result in ugly text on Windows systems.

Caution: always think 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.

NB​: to learn more about choosing embedded fonts, read Google Design’s Choosing Web Fonts: A Beginner’s Guide.

NB​: 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 

Logo