Guillermo Esteves

Helvetica Neue Light

Some of my recent visitors might have noticed that the current version of this site uses Helvetica Neue Light1 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:

Partial screenshot 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 PostScript2 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 recent3 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 version4 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 behavior5. 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.

  1. Unless you’re in Windows. Then you just get Arial. I’m sorry.
  2. To find out the PostScript name of a font select it in Font Book and click Preview → Show Font Info (⌘I).
  3. As of April 4th, 2008 (r31623.)
  4. Safari 3.1, as of this writing.
  5. Although a patch was submitted for the bug I filed, which reverts old behavior for full-name based matches but prefer match by family name.

About Guillermo Esteves

Hello, there. I’m a Venezuelan-American web developer based in Jackson Hole, Wyoming, right in the heart of Grand Teton National Park. I’ve been building websites for over 20 years, and I’m currently a Senior Engineering Manager at Vox Media, where I lead a team charged with building first-class editorial tools for journalists across the world. Previously at Vox, I’ve led multiple teams as engineering manager & lead engineer, including the Services team, bringing Chorus to newspapers such as the Chicago Sun-Times, Deseret News, and the Minneapolis Star Tribune; the Revenue Platforms team, helping build better advertising tools & products for our networks; and the Performance team, helping make our sites as fast as possible. I was also a Senior Front-End Engineer at The Verge, helping build a sweet, responsive, better performing site, as well as cool editorial features like Fanboys and The Verge 50.

In my free time, I’m also a wildlife & landscape photographer, and you can see some of my work on my website, All-Encompassing Trip. This year one of my photographs, Close Encounter at Antelope Flats, was chosen as one of the four highly commended photos in London’s Natural History Museum’s Wildlife Photographer of the Year, People’s Choice Awards.

Elsewhere on the web

View my photography at All-Encompassing Trip, view it again (but smaller) on Instagram, check out my repos on Github, add me to your professional network (ugh) on LinkedIn, or email me at