Fluid Design & Font Sizes Font Metrics Font Samples Font Sets Possible Weights True Weights

Resources ⮞ Fonts

This page gives information about web fonts:

Separate pages give additional information about web 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 sizes, weights, and variations. Likewise this page uses “generic font” for the term “generic font family” which appears in CSS specifica­tions.

Characters 

Web characters and other web glyphs are defined in the Unicode Standard.

It is important to note that real-world fonts typically have only a small subset of the full Unicode character set. For example, the Unicode 10 Standard defines almost 140,000 characters, but many major fonts support only the MES-1 set, with 335 characters, the WGL4 set, with 656 characters, or the MES-2 set, with 1062 characters.

Some fonts have a very large number of characters, e.g. the Noto and Bitstream’s Cyberbit font families, though they are handicapped by being available in few font weights, and Cy­berbit is further handicapped by being dated.

If you try to use a character which is not available in the first font in the applicable font stack, the browser will try to find that character in succeeding fonts in the font stack: this can result in text with odd characters from other fonts; or, if the character can’t be found in any of the fonts, this can result in the character not being rendered. You should, therefore, choose fonts with all the characters you use in your website.

Caution : one problem with fonts is that there is no easy way to keep them up-to-date: indeed, there is often no easy way to determine where the latest versions of fonts may be found. As a result, different people will have different ver­sions of fonts, with older fonts having fewer characters or more defects. Also, there is no way for a site to know which users have which versions of fonts, and a site which works well for one user may not work as well for another user with older versions.

User Default Fonts 

Browsers typically let users choose fonts to be used when pages don’t 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 choose two fonts: a web page font, for propor­tional text, and a plain text font, for monospace text.

With many browsers the user default 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. Here are samples of your browser’s generic fonts:

Standard generic fontSample
serif A quick brown fox jumps over the lazy dog
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789¶
sans-serif A quick brown fox jumps over the lazy dog
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789¶
cursive A quick brown fox jumps over the lazy dog
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789¶
fantasy A quick brown fox jumps over the lazy dog
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789¶
monospace A quick brown fox jumps over the lazy dog
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789¶

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

Proposed generic fontSample
system-ui A quick brown fox jumps over the lazy dog
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789¶
emoji A quick brown fox jumps over the lazy dog
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789¶
math A quick brown fox jumps over the lazy dog
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789¶
fangsong A quick brown fox jumps over the lazy dog
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 fall-back fonts for browsers which don’t support the proposed generic fonts. For example:

font-family: system-ui, sans-serif;

This selects 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: -apple-system, system-ui, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', 'Open Sans', 'Droid Sans', 'SF UI Text', 'Lucida Grande', Tahoma, Helvetica, Arial, sans-serif;

This selects a user interface font in several versions of Android, Linux, MacOS, and Windows, with fall-backs to common system fonts.

User Interface Fonts

In addition to the generic fonts and proposed generic fonts, some browsers honour a few font names which select common user-interface fonts which can be selected using the CSS font property — but not using the font-family property. These are listed below:

User-interface fontSample
caption User-preference font used in objects that have captions: buttons, labels, and so on
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789¶
icon User-preference font used in icon labels
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789¶
menu User-preference font used in menus
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789¶
message-box User-preference font used in dialog boxes
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789¶
small-caption User-preference font used in small controls
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789¶
status-bar User-preference font used in window status bars
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789¶

Suggesting Fonts, Weights, & Widths 

There are a number of ways to suggest Fonts, Font Weights, and Font Widths.

Fonts 

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

  1. 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 possible approach if the fonts are unimportant to the design.

    An example is this concept site.

    There is a possible problem with this approach: if the user’s fonts lack a character used on the site, there is no fall-back. As a result, this approach is viable only if the site only contains universally available characters.

  2. The designer can use the <font> tag.

    Note : this is deprecated, and it is less capable than other methods: don’t use <font>.

  3. 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 choose the generic fonts: however, as discussed above, few browsers enable users to pick the generic fonts, and therefore if a browser selects a poor generic font, pages may look ugly or be unreadable.

    There is a possible problem with this approach: if the generic font lacks a character used on the site, there is no fall-back. As a result, this approach is viable only if the site only contains universally available characters.

  4. The designer can use CSS to suggest a list of fonts (alias a font set or font stack), e.g. using:

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

    This gives the designer more control over how pages look; this can make pages more attractive and easier to read; this can help to make pages look much the same for different users; this provides fall-backs in case the site uses a character which is not in the first font; but it reduces the user’s ability to choose. Note : it is important to suggest a list of similar fonts; this ensures more consistent results; the browser will use the first font in the list that is installed or embedded and which contains a site’s characters.

    An example is this site, the Browser News site.

    More details about this appears below, in Suggest Alternate Fonts in a Font Stack.

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 isn’t 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.

Font Weights 

WeightWeight names
100 Thin, Hairline, Extra Light
200 Extra Light, Light, Ultra Light
300 Light, Semi Light
400 Normal, Book, Plain, Regular, Text, Thick
500 Medium, Dark, Extra Thick
600 Semi Bold, Demi bold, Bold, Extra Dark
700 Bold, Extra Bold, Ultra Bold
800 Extra Bold, Black, Heavy, Ultra Bold
900 Black, Heavy, Extra Black, Ultra Black

One problem with working with font weights is that there is no standard nomenclature for the various font weights: for example, as shown in the table at the right, a font with weight 300 might be called ‘Light’ with one font, but ‘Semi Light’ with another. If in doubt as to which weight corres­ponds to which font name, see the (very, very slow) page Resources ⮞ Fonts ⮞ True Weights. Note that the bold names in this table are the names preferred by this author, and the large bold names are the names recognized in CSS rules.

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

  1. When the designer wants bold text, the designer can use HTML tags for which browsers commonly set bold font weights: for example, <b>, <h1><h6>, <strong>, <th>.

    This approach can work for simple pages, but it is quite limited: only two weights are possible — normal and bold — it is semantically weak, and it makes it harder to later change the format of particular classes of text.

    Note : generally speaking, <b> should not be used, because it is semantically meaningless.

  2. When the designer wants more nuanced control of weights of tags, the designer can use CSS to specify more nuanced weights for HTML tags: for example:

    h1, h2 { font-weight:900; }
    h3, h4 { font-weight:800; }
    em em { font-weight:600; }

    This CSS specifies a greater weight to <h1> and <h2> tags, a somewhat greater weight to <h3> and <h4> tags, and a semi-bold weight to double <em> tags.

    Again, this approach can work for simple pages, but it is still fundamentally limited: still semantically weak, and still harder to later change the format of particular classes of text.

  3. The designer can use inline styles to define the format of text. For example:

    <span style="font-weight:700;">Foxes</span>: quick foxes — whether <span style="font-weight:500;">red</span>, <span style="font-weight:500;">brown</span>, <span style="font-weight:500;">grey</span>, or <span style="font-weight:500;">white</span> &mdash; jump over lazy dogs.

    This produces text in which the initial instance of ‘fox’ has weight 700, and each instance of a colour has weight 500. For example:

    Foxes: quick foxes — whether red, brown, grey, or white — jump over lazy dogs.

    This is an extremely bad technique unless the format specified is to be used for that text alone, and nowhere else in the website.

  4. The designer can put CSS rules in a stylesheet to specify the appearance of content, and use tags — and class attri­butes within tags — to select the rule(s) which are to apply to that tag.

    For example, the designer could create a stylesheet containing:

    span.species { font-weight:700; }
    span.species_colour { font-weight:500; }

    and then put the following in an HTML document:

    <span class="species">Foxes</span>: quick foxes &mdash; whether <span class="species_colour">red</span>, <span class="species_colour">brown</span>, <span class="species_colour">grey</span>, or <span class="species_colour">white</span> &mdash; jump over lazy dogs.

    which will render:

    Foxes: quick foxes — whether red, brown, grey, or white — jump over lazy dogs.

    This is by far the best technique to use. It allows any valid font weight to be used, is semantically strong, and makes it easy to later change the appearance of content.

Font Widths 

Font Stretch NameExamples of Widths
ultra-condensed  
extra-condensed 61%, 83%
condensed 67%, 68%, 73%, 78%, 79%, 82%, 87%, 88%, 90%
semi-condensed 87%, 93%
normal 100%
semi-expanded 107%
expanded 113%, 122%
extra-expanded  
ultra-expanded  

One problem with working with font widths is that there is no stan­dard width for each of the values of the CSS font-stretch property: what is called condensed for one font may be as wide as semi-condensed for another font, or extra-condensed for a third font. The stan­dard names of widths appear in the table at the right, along with the widths (per­centages of the parent fonts’ widths) of various fonts with that width. One consequence of this prob­lem is that it can be very hard to create a font stack in which all the fonts in the stack have similar widths.

Having said that, there is only one way to specify a desired font-width: by setting the font’s CSS font-stretch property in a font stack that takes into account Coping with Direct­Write Issues; for example:

font-family:'Arial Narrow', 'Arial', 'Helvetica Condensed', 'Helvetica', 'Encode Sans Condensed', 'Encode Sans', 'Saira Condensed', 'Saira', 'Archivo Narrow', 'Archivo', 'Cabin Condensed', 'Cabin', 'Liberations Sans Narrow', 'Liberations Sans', sans-serif; font-stretch:condensed;

The hard part of this is identifying fonts with similar metrics. You can find font metrics at Resources ⮞ Fonts ⮞ Metrics.

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 created a set of 6 excellent fonts for Vista and Office 2007 — Calibri, Cambria, Candara, Consolas, Con­stantia, and Corbel — that should be popular web fonts: however, 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 isn’t 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: for details, see Embeddable (Downloadable) Fonts.

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

Chromatic Fonts 

Chromatic fonts have multi-coloured characters, for example:

Gilbert Color:

Sample of Gilbert Color font

OneLine Bold:

Sample of OneLine Bold font

Sutro Deluxe:

Sample of Sutro Deluxe font

Watercolor:

Sample of Watercolor font

These chromatic fonts — indeed, most chromatic fonts — are best used in larger font sizes, for very specialized purposes: e.g. as dropcaps, decorative headers, in splash pages, and in artwork. The Gilbert Color font is particularily specialized: it is best suited for publications of LGBTQ groups.

Though most chromatic fonts are best used in large font sizes, it is easy to imagine that some fonts may be good for body text, e.g. with characters with subtly sculpted 3D highlights, in tints of black, in tints of colour, in glittering gold, or in shim­mering silver.

Chromatic fonts often have multiple layers, with characters created by laying down layers upon other layers, some­times with CSS tricks to control which layers are used, in which order, in which colours. For example, these images of a glyph in a first, red layer below is overlaid by a glyph in a second, black layer to product the final, composite chromatic character:

Red E + Black E = Coloured, Composite E

The number of layers can be large. The Sutro Deluxe font pictured above comes with 5 layers. The Bixa font (not pictured) comes with 12 distinct layers with 200 combinations.

Browser support of chromatic fonts is uneven. There are four formats which may be used for encoding chromatic glyphs, with OpenType-SVG being the standard, but (as of Aug 2017) only Edge and Firefox support this format. Most modern browsers — Internet Explorer being the exception — do, however, support formats in which chromatic emojis are encoded. Operating sys­tem support of chromatic fonts is also uneven, with Windows 10 (as of Aug 2017) providing the best support. Other software support of chromatic fonts is likewise uneven: it will take many years for all programs which use fonts to be enhanced to support chromatic fonts.

Modern chromatic fonts first appeared to produce chromatic emojis. If your operating system and browser support chro­matic emojis, you can see an example of these emojis here:

🙈 🙉 🙊

Chromatic fonts are now used for glyphs of all sorts, not just emojis. Chromatic fonts are little used in websites today (Aug 2017), because full software support is lacking, because CSS control of chromatic effects is limited, because chromatic fonts are rare, and because chromatic fonts are useful only for special purposes. Software support will certainly improve over time, CSS control will improve, and chromatic fonts will become more common: but, although the use of chromatic fonts will grow over time, chromatic fonts will still only be useful for special purposes.

Note : one thing that is a tad confusing is that chromatic emojis will appear with recent versions of Windows 10 even if no font in the applicable font stack offers chromatic emojis. It would appear that Windows 10 is doing font sub­sti­tution, using built-in emoji fonts, if a character is a Unicode emoji. E.g., recent versions of Windows 10 auto­magically use Microsoft’s Segoe UI Emoji font for emoji characters.

Caution : because websites must be accessible to the visually impaired, chromatic fonts should not be used in a way that would harm site usability.

See also : for chromatic font standards, see OpenType-SVG; and see the SVG - The SVG (Scalable Vector Graphics) table; and see the draft CSS Fonts Module Level 4 Recommendation, including the section titled Color Font Support for controlling chromatic effects.

See also : for details about chromatic fonts, see colorfonts.wtf, The Evolution of Chromatic Type, Windows Dev Center Color Fonts, and Wikipedia’s OpenType#Color_Fonts.

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, and URW Palladio L:

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', 'Book Antiqua', 'URW Palladio L', serif; }

Generic Similar Fonts (in alphabetic order)
serif Palatino: Book Antiqua, Palatino, Palatino Linotype, Palatino LT Std, URW Palladio L
Times: CG Times, Liberation Serif, Linux Libertine, Nimbus Roman No9 L, Noto Serif, Source Serif Pro, Spectral, Times, TimesNR, Times New Roman, Tinos
sans-serif Arial: Arial, Arial Unicode MS, Arimo, Fira Sans, Helvetica, Lato, Liberation Sans, Microsoft Sans Serif, Nimbus Sans L, Source Sans Pro, Ubuntu, Univers
Arial Narrow: Arial Narrow, Fira Sans Compressed, Fira Sans Condensed, Helvetica Condensed, Liberation Sans Narrow, Ubuntu Condensed, Univers Condensed
Verdana: DejaVu Sans, Input Sans, Lucida Grande, Lucida Sans, Lucida Sans Unicode, Montserrat, Noto Sans, Open Sans, Verdana
Avant Garde: Avant Garde, Avantgarde, Century Gothic
Optima: CG Omega, Eterna, Optane, Optima, Opulen, Oregon LDO, 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, Noto Mono, ource 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 ⮞ Fonts ⮞ Font Metrics.

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

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

Note : there will be more choices in the future as embeddable fonts become more common, and more commonly sup­port­ed. See Embeddable (Downloadable) 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 free 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.

Exceptionally flexible free sans-serif fonts include 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.

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

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.

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 options 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, Opera, SeaMonkey, and Vivaldi wrongly rendered Segoe UI Light and Segoe UI Semilight the same, whereas Microsoft Edge and Internet Explorer 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.

Embeddable (Downloadable) Fonts 

Normally a web page can only use installed fonts: if a page specifies a font that isn’t installed, the browser picks another that is. With modern browsers, however, it is possible to specify embeddable (downloadable) fonts: i.e., fonts that are temporarily downloaded to the browser so that a page may use fonts which are not installed.

There are, however, 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.

 

 Top of Page         Legal Notices