Fluid Design & Font Sizes Font Metrics Font Samples Font Sets Free Fonts 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 (local) 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 (local) 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 ren­der­ed, 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 60%, 62%, 67%, 68%, 73%, 76%, 78%, 79%, 82%, 83%, 87%, 88%, 90%, 92%
semi-condensed 87%, 88%, 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
Georgia Pro         Pan-European Supplemental Font    
Georgia Pro Cond         Pan-European Supplemental Font    
Palatino Linotype Common Font Common Font Common Font Common Font Common Font    
Rockwell Nova         Pan-European Supplemental Font    
Rockwell Nova Condensed         Pan-European Supplemental 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  
Arial Nova         Pan-European Supplemental Font    
Arial Nova Condensed         Pan-European Supplemental 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    
Gill Sans Nova         Pan-European Supplemental Font    
Gill Sans Nova Cond         Pan-European Supplemental 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    
Neue Haas Grotesk Text Pro         Pan-European Supplemental 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
Verdana Pro         Pan-European Supplemental Font    
Verdana Pro Cond         Pan-European Supplemental 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 created a set of excellent fonts for Windows 10 — Arial Nova, Arial Nova Condens­ed, Georgia Pro, Georgia Pro Cond, Gill Sans Nova, Gill Sans Nova Cond, Neue Haas Grotesk Text Pro, Rockwell Nova, Rockwell Nova Con­dens­ed, Verdana Pro, and Verdana Pro Cond — that should be popular web fonts: however, many are smaller than traditional fonts, there­fore there is a risk that, if you use them for body text, users will find 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 Choosing Embedded (Downloaded) Fonts.

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

Chromatic Fonts 

Chromatic fonts have multi-coloured characters, for example:

Abelone:

Sample of Gilbert Color font

ColorTube:

Sample of ColorTube Color font

Gilbert Color:

Sample of Gilbert Color font

OneLine Bold:

Sample of OneLine Bold font

Sutro Deluxe:

Sample of Sutro Deluxe font

Trajan Color:

Sample of Trajan Color 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 having subtly sculpted 3D highlights, with tints of black, with tints of colours, in glittering gold, or in shim­mering silver. Trajan Color is an example of a chromatic font which is readable at smaller font sizes while retaining some of its gold glitter.

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

Support of chromatic fonts is uneven:

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 : an example of CSS which may be used in controlling chromatic fonts is the font-feature-settings property. For more about this, see Mozilla’s font-feature-settings and Adobe’s Using OpenType-SVG fonts with CSS.

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 Nova, 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, Arial Nova Condensed, 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.

Using Embedded Fonts 

Normally a web page can only use installed (local) fonts: if a font isn’t installed, the browser picks another font in the current font stack that is installed. With modern browsers, however, it is possible to specify embedded (down­load­able) fonts: i.e., fonts that are hosted on a server and temporarily downloaded to the browser and cached so that the browser can use those fonts. This site, for exam­ple, uses two embedded fonts — Fira Sans and Fira Sans Condensed — hosted by Google’s font service.

Note : to learn about choosing embedded fonts, go here.

Embedded fonts are specified in several ways:

See also : W3C’s CSS3 Fonts, Mozilla’s “Web Fonts”, CSS-Trick’s “Using @font-face”, Sitepoint’s “Optimizing Web Fonts for Performance”, and Wiki­pe­dia’s “Web Typography”.

 

 Top of Page         Legal Notices