“helvetica, arial”, Not “arial, helvetica”

Published on Feb 20, 2008 (updated Jan 31, 2025), filed under development (feed). (Share this on Mastodon or Bluesky?)

This and many other posts are also available as a pretty, well-behaved ebook: On Web Development.

Unless you truly want Arial and not the better Helvetica font, use the order helvetica, arial in your CSS font declarations, not the all-so-common arial, helvetica. Why? Because Arial is only a typographically inferior copy of Helvetica, and Helvetica is common enough by now so that one can actually reference it: Helvetica is, indeed, one of the Mac OS system fonts.

Skipping the history of Arial—Wikipedia explains and Mark Simonson colors it—I just like to share a brief analysis of a few decorator, designer, and typographer websites: When naming Arial within CSS font preferences first, almost everyone gives it precedence over the equally often listed Helvetica, even though that cannot be desired (and is pointless, because Arial would always be pulled instead).

Since there is and never was, thanks to CSS’s font handling, a need to favor Arial, it’s time to fix an almost historical mistake: Switch to helvetica, arial. On systems with Helvetica installed you’ll get the famous Swiss Grotesque type, and otherwise have a reliable fallback. This even works when your favorite font is yet another one, as in 'trebuchet ms', helvetica, arial, sans-serif.

Update (February 22, 2008)

Your feedback suggested me to set up another test page. Please try and comment. My own tests on both Mac OS and Windows XP didn’t show any problems (font file on Windows, for what it’s worth: “Helvetic.TTF”) except that with larger font sizes, occasionally, there’s a glitch with glyph presentation, even with ClearType activated.

However, when you’re in doubt about Helvetica’s abilities, and when you then consider that Arial is pretty much available on every system (according to font stats), just refer to arial. arial, sans-serif, that is, without any reference to Helvetica. Helvetica doesn’t get applied when named after Arial.

About Me

I’m Jens (long: Jens Oliver Meiert), and I’m a web developer, manager, and author. I’ve worked as a technical lead and engineering manager for small and large enterprises, I’m an occasional contributor to web standards (like HTML, CSS, WCAG), and I write and review books for O’Reilly and Frontend Dogma.

I love trying things, not only in web development and engineering management, but also in other areas like philosophy. Here on meiert.com I share some of my experiences and views. (I value you being critical, interpreting charitably, and giving feedback.)