Or: I would love to know how to use Helvetica Neue on the web

Or: No, really, was this always so complicated?

In this context, when I say “safe”, I don’t mean “using only web safe fonts”, I mean “how the heck do you get the non-web-safe-font to show up when you know you have it”? I never noticed before having so much trouble figuring out what a font’s name should be in a font stack. Sometimes, for a particular system, I’ve looked up a “better” font to add to the font stack, but..

Wondering what I’m talking about? An example would be typing something like “ArialBlack”, “Arial-Black”, “Arial Black” in your font-family font stack in order to get Arial Black to show up on 2 different computers.  I don’t think I’ve ever previously needed to do such a thing.  But maybe it never worked and I just didn’t notice!  *shrug*

It’s relevant to a design I’m working on right now.  The designer used Helvetica Neue — not precisely a web safe font, though since it’s the default font of Mac OS X, I think a not-insignificant portion of people have it.  I’d like it to show up for people who do happen to have it.  But so far, even though I have some of the Helvetica Neue family on my work computer, I can’t see it!  I’d like for those of us dealing with this stage of the development to see Helvetica Neue when I list it — if only to reassure myself that I still know how to write CSS! (Ultimately I’m not sure how I’ll deal with fonts on this design; I haven’t finalized everything.)

Unfortunately, searching the web for how to do this has raised more questions for me than it answered.

The challenges are several:

  1. First, it seems that different systems — either having to do with the operating system or the browser — deal with spaces differently (or something)?  Sometimes you need to take them out, sometimes you need to use hyphens.
  2. Second, the properties font-weight and font-stretch are inconsistently supported.

#1 – Spaces?

One system might recognize “HelveticaNeue” and another “Helvetica Neue.”  I found that much on the web, but I wasn’t fully satisfied as to why. So I’m not entirely sure which systems will need addressing in that manner and when.  Or whether it actually has to do with spaces only, or matching post script names, or the browser, or a combination of things.  As a consequence I’m not sure if my assumptions on the names of some of these Helvetica Neue examples are right or not; particularly when it comes to, say, a light/condensed font.  For example, one post demonstrated that Helvetica Neue Light should be rendered at least once as “HelveticaNeue-Light” — but what about Ultra Light?  “HelveticaNeue-UltraLight” or “HelveticaNeue-Ultra-Light”?  Anyone with insight how to consistently predict when to replace spaces in font names with nothing or with hyphens, please let me know…

#2 – Weights and Stretch

And, for various reasons, most of which seems to center around inconsistent support for more specific font-weights and the general lack of support for font-stretch, sometimes you need to declare the font-weight and font-stretch as the part of the font name in font-family, other times you can (perhaps) expect font-weight and font-stretch to work.  I believe as a general rule you can expect CSS3-supporting browsers to begin to handle font-stretch (as it was taken out of CSS 2.1, and is [so far] back in CSS3). #1 of course has bearing on this, because if you want to get the right font (event without having to explicitly list a variation), you’re going to have to get the core name right: spaces, no spaces, hyphens, whatever…

And of course, you have to deal with the general problem of fallback fonts with similar x-height, weight, etc.  Which I tend to skim over in real life, praying for luck, but I really should pay more attention to.

Grasping at Font Stacks

Helvetica Neue – Normal (No Stretch)

Helvetica Neue Black Font Stack

font-family: "HelveticaNeueBlack", "HelveticaNeue-Black", "Helvetica Neue Black", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosBold', "Arial Black", sans-serif; font-weight:800; font-stretch:normal;

Helvetica Neue Heavy Font Stack

font-family: "HelveticaNeueHeavy", "HelveticaNeue-Heavy", "Helvetica Neue Heavy", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosBold', "Arial Black", sans-serif; font-weight:700; font-stretch:normal;

Helvetica Neue Bold Font Stack

font-family: "HelveticaNeueBold", "HelveticaNeue-Bold", "Helvetica Neue Bold", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosBold', "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif; font-weight:600; font-stretch:normal;

Helvetica Neue Medium Font Stack

font-family: "HelveticaNeueMedium", "HelveticaNeue-Medium", "Helvetica Neue Medium", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosRegular', "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif; font-weight:500; font-stretch:normal;

Helvetica Neue Regular Font Stack

font-family: "HelveticaNeue", "Helvetica Neue", "HelveticaNeueRoman", "HelveticaNeue-Roman", "Helvetica Neue Roman", 'TeXGyreHerosRegular', "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif; font-weight:400; font-stretch:normal;

Helvetica Neue Light Font Stack

font-family: "HelveticaNeueLight", "HelveticaNeue-Light", "Helvetica Neue Light", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosRegular', "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif; font-weight:300; font-stretch:normal;

Helvetica Neue Thin Font Stack

font-family: "HelveticaNeueThin", "HelveticaNeue-Thin", "Helvetica Neue Thin", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosRegular', "Arial", sans-serif; font-weight:200; font-stretch:normal;

Helvetica Neue Ultra Light Font Stack

font-family: "HelveticaNeueUltraLight", "HelveticaNeue-Ultra-Light", "Helvetica Neue Ultra Light", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosRegular', "Arial", sans-serif; font-weight:100; font-stretch:normal;

Helvetica Neue – Extended

Helvetica Neue Black Extended Font Stack

font-family: "HelveticaNeueBlackExtended", "HelveticaNeue-Black-Extended", "Helvetica Neue Black Extended", "HelveticaNeueBlack", "HelveticaNeue-Black", "Helvetica Neue Black", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosBold', "Arial Black", sans-serif; font-weight:800; font-stretch:expanded;

Helvetica Neue Heavy Extended Font Stack

font-family: "HelveticaNeueHeavyExtended", "HelveticaNeue-Heavy-Extended", "Helvetica Neue Heavy Extended", "HelveticaNeueHeavy", "HelveticaNeue-Heavy", "Helvetica Neue Heavy", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosBold', "Arial Black", sans-serif; font-weight:700; font-stretch:expanded;

Helvetica Neue Bold Extended Font Stack

font-family: "HelveticaNeueBoldExtended", "HelveticaNeue-Bold-Extended", "Helvetica Neue Bold Extended", "HelveticaNeueBold", "HelveticaNeue-Bold", "Helvetica Neue Bold", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosBold', "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif; font-weight:600; font-stretch:expanded;

Helvetica Neue Medium Extended Font Stack

font-family: "HelveticaNeueMediumExtended", "HelveticaNeue-Medium-Extended", "Helvetica Neue Medium Extended", "HelveticaNeueMedium", "HelveticaNeue-Medium", "Helvetica Neue Medium", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosRegular', "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif; font-weight:500; font-stretch:expanded;

Helvetica Neue Regular Extended Font Stack

font-family: "HelveticaNeueExtended", "HelveticaNeue-Extended", "Helvetica Neue Extended", "HelveticaNeueRomanExtended", "HelveticaNeue-Roman-Extended", "Helvetica Neue Roman Extended", "HelveticaNeue", "Helvetica Neue", "HelveticaNeueRoman", "HelveticaNeue-Roman", "Helvetica Neue Roman", 'TeXGyreHerosRegular', "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif; font-weight:400; font-stretch:expanded;

Helvetica Neue Light Extended Font Stack

font-family: "HelveticaNeueLightExtended", "HelveticaNeue-Light-Extended", "Helvetica Neue Light Extended", "HelveticaNeueLight", "HelveticaNeue-Light", "Helvetica Neue Light", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosRegular', "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif; font-weight:300; font-stretch:expanded;

Helvetica Neue Thin Extended Font Stack

font-family: "HelveticaNeueThinExtended", "HelveticaNeue-Thin-Extended", "Helvetica Neue Thin Extended", "HelveticaNeueThin", "HelveticaNeue-Thin", "Helvetica Neue Thin", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosRegular', "Arial", sans-serif; font-weight:200; font-stretch:expanded;

Helvetica Neue Ultra Light Extended Font Stack

font-family: "HelveticaNeueUltraLightExtended", "HelveticaNeue-Ultra-Light-Extended", "Helvetica Neue Ultra Light Extended", "HelveticaNeueUltraLight", "HelveticaNeue-Ultra-Light", "Helvetica Neue Ultra Light", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosRegular', "Arial", sans-serif; font-weight:100; font-stretch:expanded;

Helvetica Neue – Condensed

Helvetica Neue Black Condensed Font Stack

font-family: "HelveticaNeueBlackCondensed", "HelveticaNeue-Black-Condensed", "Helvetica Neue Black Condensed", "HelveticaNeueBlack", "HelveticaNeue-Black", "Helvetica Neue Black", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosCnBold', "Arial Narrow", "Arial", sans-serif; font-weight:800; font-stretch:condensed;

Helvetica Neue Heavy Condensed Font Stack

font-family: "HelveticaNeueHeavyCondensed", "HelveticaNeue-Heavy-Condensed", "Helvetica Neue Heavy Condensed", "HelveticaNeueHeavy", "HelveticaNeue-Heavy", "Helvetica Neue Heavy", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosCnBold', "Arial Narrow", "Arial", sans-serif; font-weight:700; font-stretch:condensed;

Helvetica Neue Bold Condensed Font Stack

font-family: "HelveticaNeueBoldCondensed", "HelveticaNeue-Bold-Condensed", "Helvetica Neue Bold Condensed", "HelveticaNeueBold", "HelveticaNeue-Bold", "Helvetica Neue Bold", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosCnBold', "Helvetica", "Tahoma", "Geneva", "Arial Narrow", "Arial", sans-serif; font-weight:600; font-stretch:condensed;

Helvetica Neue Medium Condensed Font Stack

font-family: "HelveticaNeueMediumCondensed", "HelveticaNeue-Medium-Condensed", "Helvetica Neue Medium Condensed", "HelveticaNeueMedium", "HelveticaNeue-Medium", "Helvetica Neue Medium", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosCnRegular', "Helvetica", "Tahoma", "Geneva", "Arial Narrow", "Arial", sans-serif; font-weight:500; font-stretch:condensed;

Helvetica Neue Regular Condensed Font Stack

font-family: "HelveticaNeueCondensed", "HelveticaNeue-Condensed", "Helvetica Neue Condensed", "HelveticaNeueRomanCondensed", "HelveticaNeue-Roman-Condensed", "Helvetica Neue Roman Condensed", "HelveticaNeue", "Helvetica Neue", "HelveticaNeueRoman", "HelveticaNeue-Roman", "Helvetica Neue Roman", 'TeXGyreHerosCnRegular', "Helvetica", "Tahoma", "Geneva", "Arial Narrow", "Arial", sans-serif; font-weight:400; font-stretch:condensed;

Helvetica Neue Light Condensed Font Stack

font-family: "HelveticaNeueLightCondensed", "HelveticaNeue-Light-Condensed", "Helvetica Neue Light Condensed", "HelveticaNeueLight", "HelveticaNeue-Light", "Helvetica Neue Light", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosCnRegular', "Helvetica", "Tahoma", "Geneva", "Arial Narrow", "Arial", sans-serif; font-weight:300; font-stretch:condensed;

Helvetica Neue Thin Condensed Font Stack

font-family: "HelveticaNeueThinCondensed", "HelveticaNeue-Thin-Condensed", "Helvetica Neue Thin Condensed", "HelveticaNeueThin", "HelveticaNeue-Thin", "Helvetica Neue Thin", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosCnRegular', "Arial Narrow", "Arial", sans-serif; font-weight:200; font-stretch:condensed;

Helvetica Neue Ultra Light Condensed Font Stack

font-family: "HelveticaNeueUltraLightCondensed", "HelveticaNeue-Ultra-Light-Condensed", "Helvetica Neue Ultra Light Condensed", "HelveticaNeueUltraLight", "HelveticaNeue-Ultra-Light", "Helvetica Neue Ultra Light", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosCnRegular', "Arial Narrow", "Arial", sans-serif; font-weight:100; font-stretch:condensed;

Currently I am using an @font-face embedded font which is free, embeddable, and fairly similar to Helvetica, TeX Gyre Heros (found on Font Squirrel), as part of my font stack, as an experiment. A convention I am forming for myself is to use single quotes around my @font-face embedded fonts and double quotes around fonts I am hoping/expecting will be installed by the user, for at-a-glance reference. As you can see, the stacks are prohibitively long and I’m still not sure they’re really going to work…plus, some of the fallbacks still need tweaking. Time to test.

  • Windows XP/Firefox 3.6.2 works pretty well. I don’t have any expanded or condensed version of the font, however, so I don’t see it — meaning I also have no way to tell if my assumption on how to get those two showing up is working.
  • Windows XP/Opera 10.51 seems to be afflicted by a bug of some sort.  I found references to Opera @font-face bugs in the initial release of Opera 10 in 2009, but I think that’s supposedly fixed, so it seems to be a different problem.  When I first open a page — it shows up as I’d expect.  Then if I refresh it becomes Times New Roman.  Open a new tab, different file, same fonts…Times New Roman.  Close Opera.  Open Opera with original file — right fonts.  Repeat.