Guillermo Esteves

Some of my recent visitors might have noticed that the current version of this site uses Helvetica Neue Light for almost all the text, a look inspired by the beautiful pages of Panic’s products. As reference, here’s a screenshot of part of CandyBar’s website:

Pretty, huh? After snooping around their CSS I saw they’re using the following declaration for the body text:

font-family: "HelveticaNeue-Light", Helvetica, Arial, sans-serif;

I thought this seemed like a slightly unusual way of declaring the font name. Why not just use “Helvetica Neue Light”? After a quick Google search I found that, as Josh Pyles and Steve Cochrane point out, Safari allows you to use a font’s additional weights by referencing their PostScript names — in this case, “HelveticaNeue-Light” — in your CSS; whereas you simply declare the font’s full name (“Helvetica Neue Light”) in your stylesheets to use it in Firefox 2 and other Gecko-based browsers like Camino. Thus, the following declaration will give you gorgeous Helvetica Neue Light in almost every Mac browser:

font-family: "HelveticaNeue-Light", "Helvetica Neue Light", sans-serif;

Almost every Mac browser, except Firefox 3 and recent WebKit nightly builds, that is. Instead, you’ll get regular Helvetica Neue.

So what’s the deal? Why doesn’t this work in the nightlies anymore, when it worked in previous ones and in the shipping version of Safari? I thought it was a bug in nightly r31623, so I filed it and got a response from Philippe Wittenbergh, stating:

I believe the current (@ r31623) is correct. Per CSS 2.1:15 Fonts, the author specifies a font ‘family’ (e.g. Helvetica Neue). If you then want a specific face (e.g. ‘Helvetica Neue-Ultra-Light’) within that family you use the font-weight property, in this case font-weight: 100.

Which is absolutely correct: Firefox 3 and the recent WebKit nightlies are simply following the standard to the letter, and calling a font face by its full or PostScript name is non-standard behavior. Shame on me for not knowing the CSS spec better. So, the standards-compliant way of getting Helvetica Neue Light is:

font-family: "Helvetica Neue", sans-serif;
font-weight: 300;

For backwards compatibility, we can add both the PostScript and full names of the font to the declaration and end up with:

font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", sans-serif;
font-weight: 300;

To sum up, if you want to use a specific font face, you have to use font-family along with the font-weight property, calling both the PostScript and screen names of that face for backwards compatibility. Now go forth and spruce up your websites with some beautiful typography.