Updating the Helvetica font stack

For the last few years specifying Helvetica Neue followed by Arial in your CSS has been the favoured technique if you wanted Helvetica on your website. The aim is to present Mac users with Helvetica Neue, whilst Windows users see Arial (a Helvetica variant optimised for Windows). I don’t know who invented the technique, but I’ve seen it recommended by countless web designers and I’ve used it in many projects myself. Recently I’ve encountered a few problems with this method that have lead me to rethink this approach.

The first issue affects pre-Snow Leopard Macs with Adobe’s extended font pack installed. On these machines Safari renders Helvetica Neue Bold as Helvetica Neue Bold Outline, making it almost illegible onscreen.

Considering raw numbers alone this issue is quite rare, but unfortunately there’s a pretty notable demographic where this setup comes as default on every desk - large creative agencies. The same large creative agencies that commission websites by the hundred.

Another bug hits Windows users with a pirated version of Helvetica Neue installed on their system. This can cause some CSS styles to trigger Webkit into having… a bit of a breakdown.

These are the bugs I can consistently reproduce, I’ve had reports of others but I haven’t managed to replicate them myself. Either way, both bugs occur in modern browsers & render the page unreadable, which is enough reason for me to look into a different solution. As I was mid Wikipedia-ing some background information for the problem, I noticed that Wikipedia itself renders in Helvetica (on a Mac) yet doesn’t have the bug. Turns out that Wikipedia simply specify the following:

font-family: sans-serif;

A bit of testing revealed that for the most part, just specifying sans-serif will give Windows users Arial and Mac users Helvetica. The catch? Opera for Mac interprets sans-serif as Lucida Grande, whilst Linux browsers seem to pick an arbitrary font from a hat (but then as they don’t have Helvetica Neue or Arial installed, this was how they were behaving previously anyway).

We can reign in Linux by specifying a couple of open-source Helvetica derivatives that are installed on all the main Linux distros; Helmet & Freesans. Opera for Mac are planning to change their sans-serif output to Helvetica or Arial within the next couple of releases to benefit platform consistency.

So here’s the font stack:

font-family: Helmet, Freesans, sans-serif;

[Update]

I’ve had the opportunity to test this font stack on a few other devices recently, and have updated the table to show those findings.

Due to the limited selection of fonts available on many mobile platforms (and my unfamiliarity with many of them) I’ve added more options to the test page.

Windows
IEArial
FirefoxArial
WebkitArial
OperaArial
Mac
FirefoxHelvetica
WebkitHelvetica
OperaHelvetica
Linux
FirefoxHelmet or Freesans
(open source alternatives to Helvetica)
Webkit Helmet or Freesans
OperaHelmet or Freesans
Other
Android 1.6Tahoma
(is displayed for all sans-serif font stacks)
Android 2.2Tahoma
(is displayed for all sans-serif font stacks)
Android 3.0.1Droid Sans
(is displayed for all sans-serif font stacks)
Blackberry OS 5BBAlpha Sans
(is displayed for all sans-serif font stacks)
Blackberry OS 6BBAlpha Sans
(is displayed for all sans-serif font stacks)
Blackberry PlaybookArial
iPhoneHelvetica
iPadHelvetica
Kindle 2PMN Caecilia
(is displayed for all sans-serif font stacks)
Kindle 3Helvetica Neue
NookTahoma
(is displayed for all sans-serif font stacks)
Windows Mobile 6.1Tahoma
(is displayed for all sans-serif font stacks)
Windows Mobile 7Tahoma