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

Post from February 20, 2008 (↻ May 31, 2022), filed under Web Development.

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.

Figure: Host and parasite.

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

Jens Oliver Meiert, on September 30, 2021.

I’m Jens, and I’m an engineering lead—currently manager for Developer Experience at LivePerson—and author. I’ve worked as a technical lead for Google, I’m close to W3C and WHATWG, and I write and review books for O’Reilly. I love trying things, sometimes including philosophy, art, and adventure. Here on meiert.com I share some of my views and experiences.

If you have a question or suggestion about what I write, please leave a comment (if available) or a message. Thank you!

Comments (Closed)

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 Oliver Meiert said:
Thanks everyone!

Daniel, good point with Neue Helvetica.

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 in your font declarations, and when this comes with an arial, helvetica snippet, then 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 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 rarely seems 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.
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.
On July 30, 2009, 23:03 CEST, MR. Tom Cat said:
< realy I have no comment today regarding the simple development design. for CSS font declarations
On November 20, 2009, 4:22 CET, Philip Williamson said:
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.
On May 13, 2010, 16:26 CEST, Justin said:
Ever since I came across Helvetica I never turned back to using the similar Arial, though I did find it a little frustrating that being a windows user I had to pay for it.

But it is a font I find myself regularly using in design work and for the body text of my sites so it was not a wasted purchase.

In absolutely all situations I would choose Helvetica over Arial.
On May 13, 2010, 21:05 CEST, Adam said:
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.
On July 15, 2010, 1:37 CEST, Tim Bennett said:
Adam, you’re completely correct. Helvetica looks atrocious on Windows machines. I’ve been casting about for a plain, readable typeface and your screenshot shows exactly why I passed over Helvetica.

I’d rather use a plain Jane like Arial than have users complain about my text being jagged and unreadable.
On August 10, 2010, 18:13 CEST, Allen said:
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.”
On August 21, 2010, 21:58 CEST, Anthony said:
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.
On August 21, 2010, 22:01 CEST, Anthony said:
I agree with the guy ‘allen’ that posted before me… the order should be: Arial, Helvetica in order to avoid usability issues.
On November 27, 2010, 17:22 CET, Daniel said:
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.
On January 31, 2011, 16:11 CET, Jared said:
You have some database errors when linking to http://manuelbieh.de/test/stats.php.
On March 19, 2011, 12:22 CET, Philip Taylor said:
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.
On April 20, 2011, 13:03 CEST, Gary said:
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.
On May 26, 2011, 17:28 CEST, Steven Bell said:
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.

Maybe this is interesting to you, too:

Next: Akismet Plugins Archive
Previous: Website Optimization Measures, Part II
More under Web Development, or from 2008
Most popular posts

Looking for a way to comment? Comments have been disabled, unfortunately.