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

Published on Feb 20, 2008 (updated Feb 22, 2008), filed under development, css. (Share this post, e.g., on Mastodon.)

This and 133 other posts are also available as a 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 an engineering lead, guerrilla philosopher, and indie publisher. I’ve worked as a technical lead and engineering manager at various companies (e.g., Google); I’m an active web and tool developer (code optimization, digital defense), a contributor to web standards (like HTML, CSS, WCAG), and a book author (O’Reilly, Frontend Dogma).

I love trying things—in web development and engineering management, but also in politics and philosophy, where I hold to one idea in particular: that we can only be well if we take good care of everyone. Here on meiert.com I talk about some of my perspectives and experiences. (Please share feedback: Interpret charitably, keep it friendly, but do be critical.)