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.
Conversation
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.
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.
No, arial does not work as a substitute foe Helvetica. Even Chris coyier gets this wrong.
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 :(
;)
@LLULL to clarify, if Helvetica is not installed, Windows will supply Arial when Helvetica is requested.
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.
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.
Did you know you don't have to quote font names that have a space in them? Now you do :)
That's an interesting find. So the best practice then is to declare the Windows specific fonts first rather than the Mac ones.