Gavin R. Putland,  BE PhD

Tuesday, November 26, 2013 (Comment)

A multiplatform Helvetica-like font stack that suppresses Arial

Arial is Microsoft's drop-in replacement for Helvetica. It's width-compatible and nearly height-compatible with Helvetica, but otherwise not similar enough to be called an imitation. Its oblique terminals (cuts) make it look amateurish, especially in large sizes.

Worse, Arial has a habit of popping up uninvited. Under Windows, the default registry settings replace “Helvetica” with Arial. In every major 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 the word “Helvetica” specifies Microsoft Sans Serif as the fallback. Under Linux, WebKit-based browsers make the same substitution if Arial is installed. Wherefore, if you put Helvetica first in your font stack, the overwhelming majority of your readers will get Arial instead of your carefully selected fallback fonts. Similarly, if your font stack falls back as far as Helvetica, the reader will probably get Arial instead of your subsequent fallback fonts.

So, if you don't want Arial except as a last resort before the default sans-serif font, “Helvetica” needs to be your second-last resort, and you must try to prevent Linux and Windows users from reaching “Helvetica”. For Linux users this is easy; as we shall see, almost all Linux systems come with good imitations of Helvetica. But for Windows users, the only satisfactory solution is to insert a web font before “Helvetica”.

The use of web fonts has been greatly simplified by the Google Fonts service, which automatically generates @font-face code for multiple versions of multiple browsers. Supported browsers 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). The service is free, and the fonts are open-source and downloadable.

Unfortunately the fonts available via Google Fonts do not include a close imitation of Helvetica. They do, however, include a font family called Arimo, which has the following attractions:

  1. It's not Arial.
  2. It's obviously not Arial; e.g. its lower-case ‘a’ has a Helvetica-like curved tail, while its upper-case ‘J’ has a bar which isn't there in Arial (or Helvetica).
  3. It's metrically compatible with Arial, hence width-compatible with Helvetica.
  4. It's between Arial and Helvetica in most other respects.
  5. It's identical to Liberation Sans, which is free, open-source, licensed under the GPL2 with the font exception, and installed on about 89% of Linux systems (according to the Code Style font survey of April 5, 2012). So if we use Arimo as the immediate fallback from Liberation Sans, readers who have Liberation Sans installed need not wait for Arimo to download. Indeed, wherever I have shown you “Arimo” or “Liberation Sans” up to this point, I have actually included both in the style declaration!

(P.S.: An alternative to Arimo is Roboto — see the answers on Arimo vs. Roboto at StackExchange.)

The font stack

The standard sans-serif font family used on this blog (e.g. in the text of the sidebar on the right) is set by the CSS declaration

font-family: "Helvetica Neue", HelveticaNeue, "TeX Gyre Heros", TeXGyreHeros, FreeSans, "Nimbus Sans L", "Liberation Sans", Arimo, Helvetica, Arial, sans-serif;

where the CSS must be formatted so that no font name contains a line-break (see comments below). For illustration, each font name in the above declaration is styled so that if the font is installed on your computer (or replaced by the operating system or the browser), its name appears in that font (or the replacement); otherwise it appears in your default serif font.

Now let us consider which of the above font families are likely to be present on which platforms. For a Windows user, the effective font stack probably reduces to

Arimo, Helvetica, Arial, sans-serif;

so that the Windows user will almost certainly get Arimo. Failing that, “Helvetica” will be rendered as Arial. For a Mac user, the effective font stack probably reduces to

"Helvetica Neue", HelveticaNeue, Arimo, Helvetica, Arial, sans-serif;

so that the Mac user will almost certainly get Helvetica Neue (known to some browsers as HelveticaNeue). The promotion of Arimo over Helvetica is not desirable for Mac users, but is necessary to prevent the substitution of Arial for Helvetica on other platforms. For a Linux user, the effective font stack probably reduces to

"TeX Gyre Heros", TeXGyreHeros, FreeSans, "Nimbus Sans L", "Liberation Sans", Arimo, Helvetica, Arial, sans-serif;

in which the first three font families are good imitations of Helvetica. Nimbus Sans L is the most ubiquitous of the three, being present on more than 98% of Linux systems, but is listed third because I have noticed that it is sometimes wrongly replaced by a condensed version (e.g. in Opera). TeX Gyre Heros (known to some browsers as TeXGyreHeros) is an extension of Nimbus Sans L and does not seem to suffer from the “condensed” bug, so it is placed first. FreeSans, present on about 86% of Linux systems, is not quite as good an imitation of Helvetica (e.g. the spacing is slightly different), but is promoted above Nimbus Sans L in order to work around the latter's “condensed” bug.

In summary, Windows users will almost certainly get Arimo, Mac users Helvetica Neue, and Linux users a Helvetica lookalike. For Windows users, the suppression of Arial relies entirely on Arimo; but by way of compensation, Arimo works with very old versions of IE.

What about Microsoft Sans Serif?

Microsoft Sans Serif is the most Helvetica-like of the standard Windows fonts. It is unsuitable for a general-purpose font stack because:

  • In all browsers, its italic and bold italic variants are rendered with far too much slope.
  • In normal type sizes, its lower-case ‘y’ is rendered badly by Firefox (on Windows) and — of all things — Internet Explorer in Standards mode (to see what I mean, look at this paragraph in IE9 with the default magnification, and toggle the broken-window button).

These problems don't affect large non-italic headings, such as the “Contents” heading on the home page of this blog. Accordingly, for that heading, I have modified the standard font stack by inserting "Microsoft Sans Serif" ahead of "Liberation Sans", with the result that Windows users see the heading in Microsoft Sans Serif instead of Arimo.

Using Arimo 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 on Blogger™.

  • Type  Arimo  in the search box.
  • Click “Add to Collection”.
  • Click “Use” (bottom right).
  • Tick boxes to choose styles (I suggest all four).
  • 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.

Because Arimo's italic glyphs are almost indistinguishable from slanted versions (shear transformations) of their upright counterparts, 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 this and found that all browsers rendered the slanted versions with more slant than I would have liked (Safari on Windows being by far the worst offender). That's why I suggest that you tick all four styles. If you follow that suggestion, the “code” will be

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

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,400italic,700,700italic' 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 (with a “Classic” template) this doesn't seem to make any difference; “your mileage may vary”. Using the “@import” tab avoids the issue.

Summary

The standard sans-serif font family on this blog is set by the CSS declaration

font-family: "Helvetica Neue", HelveticaNeue, "TeX Gyre Heros", TeXGyreHeros, FreeSans, "Nimbus Sans L", "Liberation Sans", Arimo, Helvetica, Arial, sans-serif;

in which no font name contains a line-break.


[Last modified September 3, 2015. See also “Font stacks that look similar in Windows, OS X, and Linux”.]


Creative Commons License         Return to Contents
comments powered by Disqus