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

Post from February 20, 2008 (↻ November 25, 2016), reflecting Jens the Developer.

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

Unless you really want Arial and not the better Helvetica font, please use the order helvetica, arial in your CSS font declarations, not the all-so-common arial, helvetica. Why? Because Arial is only a cheap, 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.

Figure: Host and parasite.

Skipping the history of Arial—Wikipedia explains and Mark Simonson colors it—I just like to conclude 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 reveal any problems (font file on Windows, for what it’s worth: “Helvetic.TTF”) except that with larger font sizes, there “sometimes” is a little problem with glyph presentation even with ClearType activated.

However, when you’re really in doubt about Helvetica’s operational capability, and given that Arial is pretty much available on every system (quickly presenting you some neat font stats), just refer to arial. arial, sans-serif, that is, without any reference to Helvetica. Helvetica never gets applied when named after Arial.

About the Author

Jens Oliver Meiert is a German philosopher and developer (Google, W3C, O’Reilly). He experiments with arts and adventure. Here on meiert.com he shares and generalizes and exaggerates some of his thoughts and experiences.

1. Both of these fonts are print fonts. Verdana was built from the ground up for screen reading, so why not make it the default font for websites?

2. Helvetica is not that popular. I work for a government agency that has 150 computers on site, and I can only name one that might have Helvetica on it. And I can almost guarantee that the ~1300 people who visit our site a day do not have it on their machines.

If you are designing a site where your primary audience is going to be designers - aka people who might actually have Helvetica on their machine - then go for it. Otherwise, stick with the sans that was designed for the screen - Verdana.

Fully agree with you, Jens. I do so for years.
Arial is an ugly copy and I’m always glad if a website uses Helvetica. Especially in headlines it’s much better, Arial there turns out to be really ugly.

But some Linux users told me that Helvetica is a bitmap font on their system and so it’s not possible for them to zoom.
I support Daniel’s proposol to use use Helvetica Neue instead. – Linux users won’t have any problems and designers and Mac users will see the more nice font.

I completely agree. I’ve always been a bit confused to see it the other way around. I never thought of using Daniel’s suggestion (“helvetica neue”, helvetica, arial, sans-serif;) , but I might start doing that now.

I disagree completely. I’m a graphic designer, so I don’t keep every weight of Helvetica or Helvetica Neue activated at all times. Site that spec Helvetica or Neue often end up finding an extended or condensed (depending on what I’ve got activated) and looking absolutely ridiculous.

There’s only one Arial on my system. it’s the same Arial that’s on everyone’s system. It’s a cheap copy, but it works consistently.

Arial is, in part, more ubiquitous because wysiwyg editors like Dreamweaver use “Arial, Helvetica…” by default. Probably because Arial is a system font on PCs and Helvetica is a system font on Macs, and PCs, of course, are far more common.

In any case, I agree with Sean. The most apropriate sans-serif font would be Verdana, since it was actually designed for the screen.

CET is right, Helvetica is a print font and will throw some bad kerning in there on some browsers. Looks nicer most of the time. Totally depends on the audience, as most people can’t tell the difference anyway.

1. Both of these fonts are print fonts. Verdana was built from the ground up for screen reading, so why not make it the default font for websites?

No, I neither talk about “optimized” nor “default” fonts (and fortunately, there are alternatives to Verdana, too). I just wanted to point out that when you use Arial anywhere in your font declarations—which usually means arial, helvetica snippets—then please change the order, unless Arial is indeed your “standard” font. (And I haven’t been aware of any problems with Helvetica display problems yet.)

2. Helvetica is not that popular.

Well, the situation is different in those web companies entirely using Mac systems, and this is quite a special case, too. However, this shouldn’t even matter—thanks to CSS, Arial would be used when Helvetica isn’t available.

Brian, what do you mean with “activated at all times”? (A condensed version is rarely acceptable, that’s for sure.)

jp, you’re right that one doesn’t necessarily notice the difference with certain letters and font sizes, but you can with others (famous uppercase “R”, for example). The thing is, however, that it’s Helvetica, that deserves credit, not Arial; what most people “presumably” want when referring to Arial is Helvetica, the “original”.

Michel, benz, I cannot confirm that but will set up another test case.

I’m on the fence on this one. I can see the reasoning from a historically accurate standpoint. And I agree—when Helvetica renders properly, it is the more attractive of the two options.

But Michel is right: Helvetica renders very poorly in Firefox on Windows—which is a large and growing percentage of the web population overall. It doesn’t matter if Arial is your fallback—if the user has Helvetica installed (as I do) and uses Firefox on Windows (as I do), the result is less than attractive.

Thanks for pointing this out, Jens. I’m guilty of specifying my fonts as font-family: Arial, Helvetica, sans-serif. I got the idea from looking at other people’s style sheets and thought that it was the “right” way (as the old saying goes, “Who’s the more foolish - the fool, or the fool who follows him?” )

Anyway, does anyone know where you can download a free copy Helvetica for Windows XP? Before I make the switch to declaring Helvetica before Arial, I’d like to be able to test it out on my local PC if possible.

I don’t think using Helvetica on public websites is a good idea. If you want to make something for everybody out there (which is very often the goal) you need to use fonts that you know are universal, not only in the past year, but in the past YEARS.

I have to disagree with you and take a step further and say don’t use Helvetica at all. The reason is that Helvetica renders extremely poorly in Firefox. And because of the enormity of Helvetica fonts on my system, its tough to say which one is actually being rendered. Lucida Grande also renders poorly on WinXP. Why not use verdana. If you really want to get giddy about using finer fonts make your headers flash text and use whatever makes you happy… just make sure you use a javascript replacement method like SWFObject to support non flash users, and add to SEO/SEM.

I agree with your sentiments about which font is superior, Arial is a cheap knock-off, however I don’t think you have explored the issue quite far enough. While Helvetica is found on many computers running Windows, it is not a preloaded font with the OS, therefore it is not safe to rely on a browser having it loaded. Also, the fonts when set to the same size do not render line-heights, x-heights, and actual height of the font the same in many browsers, therefore someone who uses Helvetica for a part of their site where the text height effects layout it will not render the same across browsers and operating systems.

While I agree that Helvetica is far superior, in most instances it is not the best idea to use it on the web.

I wanted to use Helvetica on a website I was designing but after realising I don’t have it on my computer, I asked some of my friends and out of 5 people with standard ‘out of the box’ operating systems, none of them had it. I completely agree that Helvetica is a much nicer font than Arial but at the moment it seems that the only people who will benefit from it on a website are mac users or PC users who want to pay the money to buy it.

really interesting thing. i allways use “Verdana,Tahoma,sans-serif,Helvetica,Geneva,Arial” in exactly that direction and never had any problems but now i have to think about it completely new maybe its a good idea to change to “helvetica, arial, geneva, …”

In fact, most of the times I use Arial, because of readability, is easier to read, but in the case of Helvetica, it seams is not found in a lot of computers by default, so end users with normal computers, find difficult to see it

I’ll never do this because Helvetica looks like crap on Windows. So if a Windows user has Helvetica, the site will look all wrong.

I know that this situation is unlikely, but Arial is actually a much better font for the screen (at limited point sizes) on Windows, because it was designed for the screen. Helvetica was designed for print, and its kerning, etc on the screen is terrible.

So you’re the one who who’s responsible for Blogger templates specifying helvetica first!
My browser (Firefox or Chrome) hits that and displays Helvetica Black, which is illegible. I have about 20 Helvetica fonts on my machine, but H. Black is the first one.
So I go into Tools and over-ride the page settings with Arial, until the next time I need to edit the CSS for a live site. Then I let pages choose their own fonts for a while, and use Firebug to disable Helvetica choice.
Tedious.

I use a Mac at home and Windows at work. Helvetica looks like hell on both of my computers in Firefox. I’ve seen a lot of sites recently with Helvetica… I immediately think Amateur. According to w3schools.com the most recent statistics of users with IE8 is 16.2%, IE7:9.3%, IE6:7.9%, Firefox:46.4%, Chrome:13.6%, Safari:3.7%, and Opera:2.2% - April, 2010.Isn’t this pretty.

Two years later and I just have to come along and comment myself, as the situation hasn’t changed.

The web is supposed to be portable, designed for proper display on the widest number of systems. That means Arial, which has a 100% availability rate on any system in the past 15 years.

I personally issue font family declarations in css as “verdana, arial, helvetica” and will continue to do so. The reasoning is simple: arial is available everywhere. If by some miracle Arial is not available, helvetica is a good substitute.

I’m not designing for print, and don’t care which one looks “better”—which is entirely subjective anyway—I care how my site is going to render, align, and wrap.

So, I issue my font family declaration with the three fonts above, in the order above, to accomplish two goals:

1. Use a font designed for display to maximize readability on a screen.

2. Prefer arial over helvetica to avoid complaints from mac users when the site doesn’t look right—because it was never, and never will be, tested with Helvetica. If they’ve disabled or removed Arial, that’s “not my problem.”

wow you know nothing about usability ff2 and ff3 have problems displaying this font in Windows; therefore, you are encouraging designers to ignore the needs of firefox users, and exclude a large potential audience.

I love Helvetica, and don’t like the history of Arial’s development, but Helvetica is not a very good screen font. For anything smaller than 15px or so, do yourself a favor and use Arial. You get maximum readability at small sizes and near-universal consistency in font rendering.

Some type agency should invent “Helvetica Micro” or “Helvetica Screen” and give it away for free, then the story would be different.

I have to agree with those that assert that Helvetica looks atrocious in a Gecko-based browser under Windows/XP. For a long time I have wondered why a number of pages render so poorly, and today I took the trouble to run a screenshot of one through “WhatTheFont”; it identified the culprit as Helvetica, I moved the offending font out of the Fonts directory, and all of a sudden those appalling pages look attractive once again.

Interestingly from Wiki about Arial: Subtle changes and variations were made to both the letterforms and the spacing between characters, in order to make it more readable on screen and at various resolutions.http://en.wikipedia.org/wiki/Arial

I’m all for being snobby about using Arial in print but that snobbery is misguided on the web. A cheap knock-off it may be but while not a pure scrteen font at least some consideration was given making it arguably more appropriate to use before you get onto availability.

I’m working on a corporate website right now and what you have written doesn’t help. Arial was the font used in the agreed layout and is the only font with the right anti-aliasing which matches up at 13pt size. Other fonts are too heavy/bold at this slightly larger size and so this kills the design.