Gavin R. Putland,  BE PhD

Monday, August 06, 2012 (Comment)

Font stacks that work across Windows, OS X, and Linux

Aims and options

The fonts on my blogs are chosen for uniformity of appearance across multiple operating systems. There are no rare fonts, and no dissonant fallbacks for common ones. The comprehensive collection of fonts installed on my computer is for reading other people's work. If other people are kind enough to read my work, I just don't want my fonts to get in the way. Therefore, when I inspect my work in my preferred browser under my preferred OS on my preferred machine loaded up with my preferred fonts, I want to see, as nearly as possible, the same fonts that my technophobic readers see.

For that purpose, Microsoft's “core” fonts have the advantage of being installable on many platforms. But that doesn't mean a “core” font should be nominated first, or at all, because

  • there are other fonts that are installable on many platforms (e.g., any multi-platform document viewer probably comes with fonts);
  • being installable does not mean a font is actually installed;
  • there may be functional or reputational reasons for avoiding particular fonts;
  • there may be reasons for preferring a non-“core” font on a particular platform, in which case
  • there may be no “core” font sufficiently similar to the first preference.

The long-term solution is the Web Open Font Format (WOFF), which was published as a Candidate Recommendation by the W3C in August 2011. You can use it now: most free and proprietary fonts are available as, or can be converted to, .woff files, which can be uploaded to your web server, declared in your style sheets using @font-face, and thence rendered to readers with any compatible browser.

In the short term, however, there are two gaps in WOFF's coverage:

  • The “compatible” browsers are quite recent: Chrome since v.6 (Sep.2010), Firefox since v.3.6 (Jan.2010), IE since v.9 (Mar.2011), Konqueror since KDE 4.4.1 (Feb.2010), Opera since v.11.10 (Apr.2011), Safari since v.5.1 (Jul.2011), and other browsers that use the same rendering engines. There are older browsers that understand @font-face, but they require different formats which, at best, make extra work for the webmaster.
  • If you use Blogger, you can't use @font-face directly: Blogger won't let you upload fonts to its servers, and won't let you access fonts on another server via @font-face, even if that other server hosts your “naked” domain; e.g., if your blog is at www.yourdomain.com and the fonts are in yourdomain.com/fonts/ (without the “www.”), you still can't use the fonts.

Google Web Fonts help to fill the gaps in the following ways:

  • The “extra work” of generating the @font-face code required by those “older browsers” has been done for you, so that the class of compatible browsers is expanded to include Chrome since v.4.249.4 (Mar.2010?), Firefox since v.3.5 (May 2009), IE since v.6 (Aug.2001 — yes, more than a decade ago), Opera since v.10.5 (Mar.2010), and Safari since v.3.1 (Mar.2008).
  • Not surprisingly, you can use Google Web Fonts with Blogger (which is owned by Google).

Of course, if you use the Google Web Fonts server, you are restricted to the fonts offered by Google. But the converse isn't true; the fonts themselves are open-source and downloadable. Neither are you prevented from using alternative fonts installed on your readers' computers — font stacks work as usual, with Web Fonts mixed with conventional fonts in any order.

However, it is not practical to include a Google web font in every stack, because the fonts take time to download. At the time of writing, Firefox will display a fallback font while waiting for the web font, while other browsers will display nothing (unless the download fails, in which case the fallback proceeds). It is therefore advisable to minimize reliance on Web Fonts, using them only to fill serious gaps in conventional font stacks. For each Web Font, it is advisable to use the minimum character set (e.g. Latin for English text), and to rely on the fallback fonts for any missing glyphs.

So let's consider some specific font groups.

Georgia-like fonts

On the LVRG Blog,* the proportional serif fonts used for body text in posts (like this one) are set by the CSS declaration

font-family: Georgia, "Lucida Bright", "Bitstream Charter", "URW Bookman L", serif;

where I have styled each font name so that if the font is installed on your computer (or faked by the operating system), its name appears in that font (or the fake), whereas if it is not installed, its name appears in your default sans-serif font (to make it obvious that the font doesn't match the name). N.B.: The CSS must be formatted so that no font name contains a line-break.

The four named fonts are “Georgia-like” in that lower-case ascenders are taller than capitals and numerals, although the difference is slight in the case of URW Bookman L. But they are not all “Georgia-like” as regards numerals; Georgia and Lucida Bright have text numerals (old-style, descending), whereas Bitstream Charter and URW Bookman L have lining numerals (non-descending).

My Georgia-like list differs from Daniel Tara's in that I have inserted Lucida Bright and Bitstream Charter before URW Bookman L. My additions match Georgia's size better than URW Bookman L, which is considerably wider.

The following table lists the chosen fonts in order of preference, together with the percentage of machines on which each font is installed, for each major platform [according to the Code Style font survey to April 5, 2012]. It also names the designers, showing another connection between Georgia and Bitstream Charter.

Table 1: Prevalence and provenance of chosen “Georgia-like” fonts.

                  Windows  MacOSX   Linux  Core?  Designer

Georgia             99.5%   98.6%   69.6%   Yes   M. Carter
Lucida Bright       82.0%   99.7%   50.3%    -    Bigelow/Holmes
Bitstream Charter     -       -     91.5%    -    M. Carter
URW Bookman L         -       -     98.4%    -    Phemister etc.

The table implies that a significant minority of Linux users will fall through to the 3rd or 4th choice, neither of which has text numerals. If you really need text numerals (which I don't), one possible solution is Vollkorn from Google Web Fonts.

Times-like fonts

Although I have a marginal preference for lining numerals, I don't use any Times Roman lookalikes for body text on blogs, partly because Times-like fonts have tight spacing which makes equations hard to read. (But when I typeset with pdflatex, which has a separate set of spacing rules for equations, I happily use Times-like fonts. Horses for courses.) However, in case I really need lining numerals somewhere on the LVRG Blog, I have defined a CSS class with

font-family: FreeSerif, "Nimbus Roman No9 L", "Times New Roman", Times, "Liberation Serif", serif;

where, again, the name of any font that is not installed or faked is shown in your default sans-serif font.

All the named fonts look very much alike except the last, Liberation Serif, which is metrically compatible with Times New Roman but visibly different, with more spurs on lower curves. FreeSerif and Nimbus Roman No9 L are listed before Times New Roman in case the operating system replaces the latter with the less similar Liberation Serif and thereby promotes Liberation Serif over the fallbacks.

The following table lists the same fonts in the same order, together with the installation rates and origins.

Table 2: Prevalence and provenance of chosen “Times-like” fonts.

                  Windows  MacOSX   Linux  Core?  Designer

FreeSerif            0.7%     -     85.2%    -    URW
Nimbus Roman No9 L    -       -     98.2%    -    URW
Times New Roman     99.8%   98.4%   69.4%   Yes   (disputed)
Times                3.6%   99.5%    0.2%    -    (disputed)
Liberation Serif      -       -     89.3%    -    S. Matteson.

Thus almost all users will have suitable installed fonts and there is no need for any web fonts.

Courier-like fonts (or how to suppress Courier New)

The ubiquitous Courier New monospace font is too light to match the common proportional fonts with which it is likely to share the page. Its free derivatives, known as FreeMono and Nimbus Mono L, are almost as faint. Courier for the Mac does not have this problem, but what is called "Courier" on Linux probably does. Courier Std and the free Courier 10 Pitch are heavier. That leaves us without a heavier "Courier" for Windows. But because Courier New is not only faint but also wide for its height, one might readily tolerate a narrower but heavier substitute. Consolas fits the bill.

So, the monospace fonts used on the LVRG Blog* are set by

font-family: "Courier 10 Pitch", "Courier Std", Consolas, Courier, FreeMono, "Nimbus Mono L", "Courier New", monospace;

where, again, the name of any font that is not installed or faked is shown in your default (proportional) sans-serif font. The following table lists the fonts in the same order, with their frequencies and origins.

Table 3: Prevalence and provenance of chosen “Courier-like” fonts.

                  Windows  MacOSX   Linux  Core?  Designer

Courier 10 Pitch     -        -     85.0%    -    H. Kettler
Courier Std          -       2.1%     -      -    Adobe?
Consolas           88.6%    48.6%     -      -    L. de Groot
Courier             3.6%    99.5%    0.2%    -    H. Kettler
FreeMono            0.6%      -     85.2%    -    URW
Nimbus Mono L        -        -     98.2     -    URW
Courier New        99.8     96.8    69.0%   Yes   Monotype.

The last three fonts on the list are faint. “Courier” may get a faint substitute on Linux systems. It is not promoted above Consolas, because “Courier” tends to be replaced by Courier New on Windows systems (that's what I mean by “faked”). Mac users see the most consistent suppression of faint fonts while Linux users see the most consistent character widths.

Steve Matteson's "Liberation Mono" (present on 89% of Linux systems) is omitted because, although it is width-compatible with Courier New, it is substantially taller and does not look at all like Courier. I note, however, that the Latin subset of Liberation Mono is available from Google Web Fonts as “Cousine”.

Helvetica-like fonts (or how to banish Arial)

Update (Nov.26, 2013): See “A multiplatform Helvetica-like font stack that suppresses Arial”.

The standard sans-serif font used on the LVRG Blog* (e.g. in the sidebar and the list of contents) is set by the CSS declaration

font-family: "Liberation Sans", Arimo, FreeSans, "Nimbus Sans L", Helvetica, Arial, sans-serif;

where the name of any font that is not installed or faked is shown in your default serif font. (Also note that Liberation Sans and Arimo should be indistinguishable; if they're not, one of the two is missing. The same goes for FreeSans and Nimbus Sans L.)

Liberation Sans has the following advantages:

  1. It's not Arial.
  2. It's obviously not Arial, because its lower-case ‘a’ has a Helvetica-like curved tail.
  3. It's not Microsoft Sans Serif, which on balance is the most Helvetica-like of the standard Windows fonts, but whose ‘a’ has an Arial-like tail, and whose ‘y’ is rendered badly by (of all things) Internet Explorer in Standards mode. (To see what I mean, look at the preceding sentence in IE9 with the default magnification, and toggle the broken-window button.) Firefox 14 on Windows has the same problem. Worse, Microsoft Sans Serif's italic and bold italic variants are rendered with far too much slope by all browsers.
  4. It's not Helvetica either — as you can tell because the capital ‘J’ has a bar which isn't there in Helvetica or Arial. More to the point, it's not called “Helvetica”. That matters because the default Windows registry settings will replace “Helvetica” with “Arial”, in which case, in every Windows browser except Opera, the registry substitution takes precedence over the CSS fallback fonts, in which case you are now seeing the word Helvetica in Arial, although the style declaration for that word specifies Microsoft Sans Serif as the fallback. WebKit-based browsers running on Linux do the same substitution (if Arial is present). Wherefore, if you put Helvetica first for the benefit of Mac users, the overwhelming majority of your readers will get Arial instead of your carefully selected fallback fonts! And as you've probably worked out by now, I'm not going to all this trouble to help you serve up Arial.
  5. It's metrically compatible with Arial, hence width-compatible with Helvetica.
  6. It's between Arial and Helvetica in most other respects.
  7. It's free, open-source, and licensed under the GPL2 with the font exception.
  8. Did I say it's not Arial?

The downside is that Liberation Sans (at the time of writing) is unlikely to be installed on a Windows box or a Mac. But Arimo, served by Google Web Fonts, is apparently identical to Liberation Sans: if I substitute one for the other and refresh the browser, not a pixel changes (compare Arimo and Liberation Sans at FFonts.net). So if we use Arimo as a fallback from Liberation Sans, we effectively extend Liberation Sans across all platforms, but readers who have Liberation Sans installed need not wait for Arimo to download. (Indeed, in the above examples, I quietly used Arimo as a fallback to show the ‘a’ and the ‘J’.)

Accordingly, Liberation Sans and Arimo are first and second in the stack. Then, to deal with missing glyphs and old browsers, we have the free Helvetica lookalikes FreeSans and Nimbus Sans L (in that order, because Opera on Linux replaces the latter with a condensed version), followed by Helvetica itself, for which Mac users will see the real Helvetica and most Windows users will see Arial. So if we fall through what is called Helvetica, we might as well nominate Arial just before the default, because Arial is at least width-compatible with the higher preferences, whereas the default may not be.

Although Arimo is available in normal, italic, bold, and bold italic, the italic glyphs are almost indistinguishable from slanted versions (shear transformations) of their upright counterparts. Hence you might be tempted to save bandwidth by downloading only normal and bold, leaving the browser to synthesize the slanted versions instead of italics. I tried it, but was forced to change my mind because all browsers rendered the slanted version with more slant than I would have liked; Safari on Windows was by far the worst offender.

The table below lists the same fonts in the same order, together with the installation rates and origins.

Table 4: Prevalence and provenance of chosen “Helvetica-like” fonts.

                  Windows  MacOSX   Linux  Core?  Designer

Liberation Sans      -        -     88.9%    -    S. Matteson
Arimo              (Web)    (Web)   (Web)    -    S. Matteson
FreeSans            1.1%      -     86.0%    -    URW
Nimbus Sans L        -        -     98.4%    -    URW
Helvetica           6.4%   100.0%    0.8%    -    M. Miedinger
Arial              99.9%    98.9%   69.4%   Yes   Monotype.

So the likely outcome is that Windows users will get Arimo or Arial, and Mac users will get Arimo or Helvetica, and Linux users will get Liberation Sans / Arimo or a Helvetica lookalike. For non-Windows users, Arial is suppressed not only by Arimo but also by the high prevalence of higher-ranked installable fonts. For Windows users, the suppression of Arial relies almost entirely on Arimo; but, by way of compensation, Arimo works with very old versions of IE.

I note in passing that Google's Open Sans, also designed by Steve Matteson, departs more clearly from the Helvetica-Arial spectrum (and is slightly wider) while remaining strictly sans-serif. If that idea appeals, you might replace the first two entries on the list by Open Sans and Liberation Sans, respectively.

Note on Microsoft Sans Serif

On the front page of the LVRG Blog, the heading of the table of contents is upright, large, and bold. Because it is upright, the poor italics of Microsoft Sans Serif are irrelevant. Because it is large, it is immune to Microsoft Sans Serif's poor rendering of the ‘y’ (which seems to affect only the normal font size, and only in IE and Firefox under Windows). And I notice that the condensed rendering of Nimbus Sans L in Opera doesn't affect the bold upright style, so the ordering of Nimbus Sans L and FreeSans can be based on preference rather than function (and I marginally prefer the former). Accordingly, the heading uses the font-family stack

"Microsoft Sans Serif", "Nimbus Sans L", FreeSans, Helvetica, Arial, sans-serif;

where the name of any font that is not installed or faked is shown in your default serif font. The likely result is that Windows users will see Microsoft Sans Serif, while Mac users will see Microsoft Sans Serif (if they have it) or Helvetica, and Linux users will see a Helvetica lookalike.

Tahoma-like/Verdana-like fonts?

Sans-serif fonts are more legible than serif fonts at small sizes, such as you might use in footnotes and sidebars. But if you use those footnotes for references, you might want serifs on the capital ‘I’ to distinguish it from the lower-case ‘l’ and assist the recognition of Roman numerals. The above “Helvetica-like” fonts don't have that feature. Tahoma and Verdana do.

Nearly all Windows and OS X systems have both Tahoma and Verdana. But on Linux, Tahoma is practically nonexistent while Verdana, being a “core” font, is installable but not always installed. The gap can be filled by Google's Droid Sans, whose capital ‘I’ has the desired serifs. Verdana is bigger (and has wider character spacing) than Tahoma or Droid Sans. On Windows, Tahoma is rendered better than Droid Sans, which is rendered better on Linux than on Windows.

These consideration suggest the font-family stack

Tahoma, "Droid Sans", Verdana, sans-serif;

where, again, the name of any font that is not available is shown in your default serif font (and Droid Sans is not downloaded by this blog or the LVRG Blog, but may be installed on your machine).

The following table shows the same fonts in the same order, together with their prevalences (to April 5, 2012) and origins.

Table 5: Prevalence and provenance of “Tahoma-like” fonts.

                  Windows  MacOSX   Linux  Core?  Designer

Tahoma            100.0%    95.9%     -      -    M. Carter
Droid Sans         (Web)    (Web)   (Web)    -    S. Matteson
Verdana            99.9%    99.2%   70.0%   Yes   M. Carter.

So Windows users would get Tahoma, and Mac users would get Tahoma or Droid Sans, and Linux users would get Droid Sans or Verdana or — in the unlikely event that they have neither installed Verdana nor kept their systems anywhere near up-to-date — the default sans-serif font (probably DejaVu Sans).

I tried the above arrangement and didn't like it. At the time of writing, Droid Sans doesn't have separately designed italic glyphs and therefore relies on the browser to introduce slant. Again all browsers give too much slant, Safari on Windows being by far the worst. For Windows users, here are Tahoma Italic and Tahoma Bold Italic (with your default serif italic and serif bold italic as fallbacks for non-Windows users). All browsers render Tahoma's italic styles with too much slant (although Safari on Windows is no worse than the others in this case). Verdana is rendered much better; but its presence cannot be relied upon.

So, if you really need serifs on a capital ‘I’ in a sans-serif passage, perhaps the best method is to define a CSS class for temporarily switching to a serif font.

I note in passing that if serifs on the ‘I’ are not an issue, then an excellent match for Verdana is DejaVu Sans / Bitstream Vera Sans / DejaVu LGC Sans. The first of the following graphics is in Verdana. The second is in DejaVu Sans.

Land Values Research Group: Economics as if location matters

Land Values Research Group: Economics as if location matters

A disadvantage of a Verdana-DejaVu sans-serif font stack is the lack of a common serif font with a similarly large x-height on Windows or Mac systems. This may be the subject of a later post.

Using Arimo and Droid Sans in Blogger™

To use web fonts in your web pages, you must not only declare them in your font stacks (as above), but also inform browsers where to find them. Let's illustrate the latter procedure for Arimo and Droid Sans on Blogger™.

  • Type  Arimo  in the search box.
  • Click “Add to Collection”.
  • Type  Droid Sans  in the search box.
  • Click “Add to Collection” for the appropriate font.
  • Click “Use” (bottom right).
  • Tick boxes to choose weights and styles.
  • Click the “@import” tab.
  • Copy the code and insert it just after the opening <style ...> tag in the <head> of your template; that is, use the code as the first part of your style sheet.

If you pick (e.g.) Normal 400 and Bold 700 for each font family, the “code” will be

@import url(http://fonts.googleapis.com/css?family=Arimo:400,700|Droid+Sans:400,700);

If you accept the “Standard” tab instead of clicking the “@import” tab, you'll get the longer alternative code

<link href='http://fonts.googleapis.com/css?family=Arimo:400,700|Droid+Sans:400,700' rel='stylesheet' type='text/css'>

which must be inserted before the style sheet (unlike the “@import...” code, which must be in the style sheet). N.B.: Some bloggers have reported that the <link ...> tag must be closed, e.g. by inserting a forward-slash before the final angled bracket. In my experience this doesn't seem to make any difference; “your mileage may vary”. Using the “@import” tab avoids the issue.

Summary

Here are the font stacks for the LVRG Blog as they appear in the style sheet, together with the tags and classes to which they apply.

.serif, .smallserif {
  font-family:       Georgia, "Lucida Bright", "Bitstream Charter",
                     "URW Bookman L", serif;
}
.times {
  font-family:       FreeSerif, "Nimbus Roman No9 L", "Times New Roman",
                     Times, "Liberation Serif", serif;
}
pre,tt {
  font-family:       "Courier 10 Pitch", "Courier Std", Consolas, Courier,
                     FreeMono, "Nimbus Mono L", "Courier New", monospace;
}
.sans, .smallsans {
  font-family:       "Liberation Sans", Arimo, FreeSans, "Nimbus Sans L",
                     Helvetica, Arial, sans-serif;
}

(The class names are arbitrary and not necessarily worthy of emulation. In particular, the .smallserif and .smallsans classes exist for historical reasons and would not necessarily be included for a new site.)


For future reference

  • Paul Dunning, “Multiple Font Families”: Note that in his “modified file”, the order of the @font-face declarations is said to be significant, but font styles and weights are not explicitly declared unless they depart from normal. I have noticed that in the declaration
    font-style: italic, oblique;
    the Error Console in Firefox reports that the second style is skipped, whereas the alternative syntax
    font-style: italic;
    font-style: oblique;
    avoids that particular error.
  • Scott Vandehey, “How to use @font-face to avoid faux-italic and bold browser styles”: Notice that his “Right Solution” does explicitly declare normal font weights and styles, but doesn't declare the oblique style. And unlike Dunning, he doesn't draw attention to the order (although his order happens to be the same as Dunning's).

__________

* This blog no longer uses exactly the same fonts as the LVRG Blog.

[Completed August 12, 2012. Last modified November 26, 2013.]


Creative Commons License         Return to Contents
comments powered by Disqus