8

On my site, http://helvetitee.com, I have the following font stack:

font-family: "helvetica neue", helvetica, nimbus-sans;

Nimbus Sans (a web font) is pulled in from TypeKit.

On Windows machines, regardless of the browser, the user is shown Arial. It seems that Helvetica is rendered as Arial by Windows instead of falling back to Nimbus (which is an Helvetica clone and therefore preferable to Arial).

Is there a way, other than OS sniffing, to prevent this? Is it a known issue? It seems to be something of a liberty for Windows to just assume it's OK to show Arial instead of Helvetica.

5
  • How about using web fonts?
    – Uwe Keim
    Sep 17, 2012 at 14:34
  • 3
    Strange. I have Helvetica Neue installed on my PC and you're right, all my browsers are rendering Arial anyway. Nimbus Sans is being skipped as well.
    – BoltClock
    Sep 17, 2012 at 14:35
  • 2
    Nimbus Sans is a web font, it's pulled in using TypeKit
    – cavill
    Sep 17, 2012 at 14:35
  • @MarcB I understand that. That's why we have a font stack. The machine should follow the stack until it finds a font it has installed, right? So it should read Helvetica Neue - no; Helvetica - no; Nimbus sans - yes (because it's a web font via TypeKit). Instead, Windows is reading Helvetica Neue and deciding to replace it with Arial. This is an abnormal behaviour. It wouldn't replace - for e.g. Futura with Arial I don't think. It would fall down the stack instead.
    – cavill
    Sep 17, 2012 at 14:38
  • 2
    Try this stack: font-family: "Helvetica Neue", Helvetica, nimbus-sans, Arial, sans-serif; (it could be the case sensitivity) Sep 17, 2012 at 14:50

5 Answers 5

9

Windows substitutes Arial for Helvetica. (Specifically Helvetica; not Helvetica Neue.) A simple way to see this is to declare font-family: Helvetica, Courier. Browsers on Windows platforms then use Arial, not Courier (as they should).

This can be changed by editing Windows registry, but as a web author, you can’t do anything about it (apart from attempts at OS-sniffing via browser-sniffing). It is an old issue (dating back at least to Windows 3, I think), though not very widely known.

2
  • So removing Helvetica from the font stack should solve the issue? I'll try this and repot back.
    – cavill
    Sep 17, 2012 at 19:03
  • I've always thought Helvetica looked wrong in Windows, and learned about the C's iconic horizontal caps, which are slanted in Arial. I never knew why. But I found your answer, and did some research. To fix it (on your computer only) the registry key is in "HKLM\SOFTWARE\Microsoft\Windows NT\CurrentVersion\FontSubstitutes". More info: technet.microsoft.com/en-us/library/cc939628.aspx Apr 24, 2017 at 22:04
2

Windows doesn't have any of those fonts, but is smart enough to default to their sans-serif font, which is arial.

a web-safe alternative would be something like font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;

as for using a webfont, fonts.com has Helvetica Neue 45 Light that you could embed.

3
  • 2
    Yeah; I am using a web font though - Nimbus Sans - to combat this. The issue is that Windows doesn't go down the font stack - it hits Helvetica and renders it as Arial, rather than falling down the stack to Nimbus as it should do. When Nimbus is the only font in the stack, Windows renders it - so it's definitely an issue with Windows choosing to render Helvetica as Arial. Thanks for the fonts.com link. I implemented that in testing a few days back but it just renders it as Arial again.
    – cavill
    Sep 17, 2012 at 14:45
  • @cavill There's an IE9 bug with Adobe Type I fonts, could this be a symptom? bobbyjoneswebdesign.blogspot.com/2011/12/…
    – JKirchartz
    Sep 17, 2012 at 14:48
  • @cavill are you sure that you've got the web font set up correctly with an EOT version? Perhaps you could post your @font-face stuff.
    – Pointy
    Sep 17, 2012 at 14:48
2

Yes, the Windows registry in its default configuration substitutes Arial for Helvetica, and this substitution takes precedence over the font-stack fallback in every major browser except Opera. So most Windows users will see Arial instead of Helvetica unless Helvetica is preceded in the font stack by

  1. a web font, or
  2. an alternative font that is reliably present on Windows systems. In my Helvetica-like font stack, I suggest Google's "Arimo" web font. Among the standard Windows fonts, Microsoft Sans Serif is a good substitute for Helvetica for upright type, but intolerable for italic type.
0

As far as I know, Windows doesn't ship with Helvetica (or any member of its family), and if it is not an installed font, it will not work on a website.

Arial is considered a blatant rip of Helvetica (though it was based on Monotype Grotesque, it is considered an alternative to Helvetica), so Microsoft doesn't have to pay hefty license fees to Haas Typefoundry (creators and licensors of the Helvetica family)

My suggestion is to try webfonts, with which you can actually embed fonts. Font Squirrel is a good place to start. (though bear in mind that embedding Helvetica Neue without license is technically a violation..)

7
  • I don't think Arial was based on the Neue variant of Helvetica. In fact, Arial pre-dates Helvetica Neue.
    – BoltClock
    Sep 17, 2012 at 14:39
  • You're right, it was Monotype Grotesque, but altered to resemble Helvetica (see en.wikipedia.org/wiki/Arial#Design_characteristics) Thanks Sep 17, 2012 at 14:40
  • 1
    Thanks for your answer, but please see my comment on @jkirchartz's answer (I am using a web font already).
    – cavill
    Sep 17, 2012 at 14:46
  • I see. Just a wild idea: why not start the stack with Nimbus? If it fails, you will degrade to Helvetica (and thus, seemingly, Arial) Sep 17, 2012 at 14:48
  • 1
    @c_kick Because Nimbus isn't true Helvetica, I don't want users with Helvetica (i.e. most of our customers) to see it. So it can only be a fall back. However - you're right - it's the best solution for Windows users. But I just wanted to find out if this was something I could sort out without OS sniffing.
    – cavill
    Sep 17, 2012 at 14:55
0

Best font stack across browsers and devices, I think

body {
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  font-weight: 300;
}

Also, use

body {
  font-family: sans-serif
}

before your font-stacks to overwrite browser default.

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.