Windows Substitutes Helvetica for Arial

I just ran into this issue today and honestly a little surprised I haven’t run into it before.

The problem was with a font stack that I wanted to try out:

font-family: "Helvetica Neue", Helvetica, "Segoe UI", Arial, sans-serif;

If a user has Helvetica Neue or Helvetica, that’s fantastic! This is likely to be the case if they’re on a Mac.

On Windows 7 and 8, Segoe UI is installed by default. Neither Helvetica Neue nor Helvetica are. Failing all that, they’ll get the tried and trusty Arial.

Except, when I went to try it, I got Arial instead of Segoe UI, even though it’s installed. Odd.

I changed the font stack to:

font-family: "Helvetica Neue", "Segoe UI", Helvetica, Arial, sans-serif;

Notice how Segoe UI is before Helvetica this time? Sure enough, I get what I expected: Segoe UI.

Oh, did you want Helvetica?

Turns out, in Windows, there’s a registry key that aliases Helvetica to Arial. If you specify Helvetica, you’ll get Arial. If you specify Helvetica and then specify any fonts after it, you’ll get Arial.

This was tested on Windows 8.1 in Internet Explorer 11 and Chrome and both did the substitution.

Published February 03, 2015
Categorized as HTML and CSS
Short URL: https://snook.ca/s/1047

Conversation

9 Comments · RSS feed
Robin said on February 04, 2015

That's bizarre... I would argue that just trying to do this substitution in the first place (the order weirdness seems like an innocent bug) is akin to some "quirks mode"-type BS. If the webpage specifies Helvetica, let the browser try to render Helvetica...

I'm also curious about the choice to use Segoe UI as a substitute for Helvetica Neue or plain Helvetica. I've often been frustrated by the lack of either on non-Mac machines, but I also think Arial is a piss poor font. Do you often use Segoe UI as the fallback for Windows 7+ computers?

I guess that's more of a subjective style question but I'm curious nonetheless.

Jonathan Snook said on February 04, 2015

In our case, we're switched from Proxima Nova to Helvetica Neue Light on Mac for headlines. Arial felt too heavy but Segoe UI is lighter. So, it's not so much that we were looking for a fallback from Helvetica but rather trying to find a replacement for Proxima Nova. At a regular weight, I think Arial works well enough as a replacement for Helvetica.

Llull said on February 05, 2015

No, arial does not work as a substitute foe Helvetica. Even Chris coyier gets this wrong.

Chris said on February 05, 2015

I think the problem with Helvetica is that is does look sh*t in Windows so replacing it with Arial at least on Windows is "good" as more readable and not that much different in type in the first place.
If devs would use a font stack of maybe Helvetica Neue, Arial, Helvetica, ... this would not be such a problem but a lots of devs (working on osx) do not even care to test on Windows. So actually I find this quite a reasonable approach.
Maybe similar to some browsers (like Opera did before being blink or IE-Spartan) implementing css props of "other" browsers prefixes (-webkit ;) just because devs are "lazy".
I guess a realistic view of how the web is which may be seen :) or :(
;)

Jonathan Snook said on February 06, 2015

@LLULL to clarify, if Helvetica is not installed, Windows will supply Arial when Helvetica is requested.

Eric A. Meyer said on February 09, 2015

I think this is the same as http://meyerweb.com/eric/thoughts/2013/03/12/helvetial/, except maybe from the other end. I’m having trouble keeping track of all the moving pieces at the moment.

Luke C. said on February 23, 2015

I thought that Helvetica was decent (even on PC) except at very small sizes. I always made sure to use Arial when you were under ~ 13 pt or so... and I thought PCs only replaced it for smaller sizes. Arial's uppercase 'R' is enough to bother me at any larger size.

Martijn said on February 24, 2015

Did you know you don't have to quote font names that have a space in them? Now you do :)

James said on April 15, 2015

That's an interesting find. So the best practice then is to declare the Windows specific fonts first rather than the Mac ones.

Sorry, comments are closed for this post. If you have any further questions or comments, feel free to send them to me directly.

Want to learn about scaling CSS for large projects?

I'm available for full and half-day workshops on scalable CSS architecture. I can provide on-site training for your team. Interested?
Get in touch.