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

Jens Meiert, February 20, 2008 / October 3, 2008.

This entry is filed under Web Development, Design.

Unless Arial really is your standard font, please use the order helvetica, arial in your CSS font declarations, not the popular arial, helvetica. Why? Because Arial, formerly Sonoran Sans Serif, basically still means kind of a copy of Helvetica, and Helvetica is ubiquitous or popular enough so that one can actually reference it; in fact, it’s even one of the Mac OS system fonts.

Figure: Host and parasite.

Skipping the history of Arial – Wikipedia already clarifies and Mark Simonson beautifully interprets it – I rather need to point to my quick analysis of quite a few designer, decorator, and typographer websites that clearly indicated the need for this note: When listing Arial within CSS font preferences, almost everyone prefers it over Helvetica, even though I bet this is not desired in most cases.

So since there’s no force (and never was anyway, thanks to the font handling of CSS) to favor Arial unless you insist on it (like one of my clients does, too), it’s finally time to fix this apparently historical mistake: Switch to helvetica, arial. It still includes a working font fallback, while systems with Helvetica installed will display the famous Swiss Grotesque type. And sure, this is even recommendable when your favorite font is yet another one, as in 'trebuchet ms', helvetica, arial, sans-serif.

Update (February 22, 2008)

Some feedback made me set up another test page, please feel free to try and comment it. 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 indeed a little problem with glyph presentation, even when ClearType is activated.

However, when you’re really in doubt about Helvetica’s operational capability, and given that Arial is basically available on every system (quickly coming up with some neat font stats), you might just want to use arial (arial, sans-serif, that is, without any reference to Helvetica).

Enjoy the most popular posts, probably including:

Comments

On February 20, 2008, 11:06 CET, danielsherson said:

I would go one step further.

“helvetica neue”, helvetica, arial, sans-serif;

I believe that helvetica neue comes with adobe products and so is reasonably widely avaliable.
On February 20, 2008, 15:29 CET, Sean said:

Two problems with this idea

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.
On February 20, 2008, 18:16 CET, Bernhard said:

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.
On February 20, 2008, 18:27 CET, Rob Schultz said:

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.
On February 20, 2008, 18:55 CET, Brian said:

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.
On February 20, 2008, 20:07 CET, jp said:

Helvetica may be superior to Arial in the print world, but I personally can’t see much difference between the two on my computer monitor (especially with the way Macs render fonts).

can you tell the difference

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.
On February 20, 2008, 20:41 CET, Duluoz said:

Just to add some humor - you’re all wrong.

* { font: bold 65px/1.5 “Comic Sans MS”; }

What more do you need?
On February 20, 2008, 21:49 CET, Michel said:

Someone told me, that Helvetica has a bad kerning on FF/Win.
On February 20, 2008, 23:25 CET, benz said:

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.
On February 20, 2008, 23:26 CET, benz said:

Sorry, mis-read the name, Sean is right
On February 21, 2008, 9:33 CET, Jens Meiert said:

First off, thanks everyone!

Daniel, good point with Neue Helvetica (I suspect “Neue” to be usually appended in order to have all Helvetica types in order).

Sean,

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 doesn’t even matter – thanks to CSS, Arial would be used when Helvetica isn’t available.

Bernhard, thank you, and that’s for certain, Arial can look very ugly

Rob, yeah, it’s yet amazing how many people still use arial, helvetica …

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”.

David, that would be fine, sure

Michel, benz, I cannot confirm that but, thanks to all your feedback, will see that I setup another test case.
On February 21, 2008, 17:59 CET, Rob @ CSSnewbie said:

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.
On April 23, 2008, 20:31 CEST, Jordan Clark said:

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.
On July 10, 2008, 15:50 CEST, Fred said:

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.

Verdana and Arial are still compatibility proofed !
On August 12, 2008, 17:56 CEST, Scott said:

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.
On September 10, 2008, 23:08 CEST, Andy Mangold said:

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.

Here is a brief article I wrote on the subject: http://www.andymangold.com/typography-of-the-web-arial-and-helvetica/
On October 7, 2008, 14:03 CEST, Iris said:

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.
On October 13, 2008, 2:15 CEST, Justin Goldberg said:

Using Scalable inman flash replacement, or sifr, might be the best for header text, as it can use any font you want, embedded in flash.
On October 18, 2008, 11:33 CEST, Bianca said:

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, …”
On November 7, 2008, 23:27 CET, Leon said:

Well I’ve had two approaches vindicated by this site: * {margin: 0; padding: 0;} and helvetica, arial, sans-serif.

As I don’t think it’s necessary to have exactly the same fonts across OSs and browsers, putting helvetica first is fine.

Also, Verdana was designed for use at small font sizes on the screen. At 14px+ it looks pig ugly. Helvetica/Arial looks OK at these sizes (although Georgia is best).
On December 6, 2008, 1:48 CET, miryam said:

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
On January 23, 2009, 12:35 CET, Acai Berry said:

I agree with the point hat Sean made. Verdana is my san serif font of choice for screen application.
On February 15, 2009, 23:30 CET, Daniel Reiser said:

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.

Give me a screen-friendly Helvetica pre-installed with Windows and your advice makes sense.

On the other side, Arial looks like garbage on the Mac. We all lose.
On March 11, 2009, 22:37 CET, Murray said:

I agree with Daniel Reiser. And, in your new test page on windows xp, Helvetica looks like trash.
On March 31, 2009, 17:00 CEST, David Simpson said:

Couldn’t agree more.
And while we’re at it Verdana must die.

Jens Meiert