Helvetica Neue variants for use on the web

I love the design of the new CandyBar site, and after exploring the CSS I saw a Helvetica face I hadn’t thought to use on the web before.

It’s called “Helvetica Neue Light”, and while the CandyBar site is referencing a slightly different name (HelveticaNeue-Light) (see update below) it is a Mac system font that all Mac users should theoretically have, if declared in CSS as “Helvetica Neue Light”. And it’s quite pretty.

Even better, after discovering this I naturally ventured into Font Book and discovered more gold in the form of “Helvetica Neue UltraLight” which can also be declared in CSS as such. It’s a real beauty, perfect for headings, and with my new found appreciation for Helvetica, these are very nice finds. Here’s some samples:

I’m 24px Helvetica Neue Light, and I look fantastic.

I’m 24px Helvetica Neue Ultra Light. Some might say my kerning’s a little tight…

I’m Helvetica Neue Ultra Light with 1px of letter-spacing. Though I still look a little lost here, maybe I should be reversed out?

Ah, here we go. Lovely.

Of course, Windows users are unfortunately left out of this particular party, and there’s no Windows system font equivalent for these lighter faces. In their case, we can sIFR the headings and default to Arial for body copy.

Update: For some reason, Safari was displaying the above examples as plain old Helvetica Neue. So I tried the Panic way of declaring Helvetica Neue Light, and it worked, which is odd. So, when declaring both spellings (font-family: “Helvetica Neue Light”, “HelveticaNeue-Light”, Arial, Helvetica, sans-serif) they render correctly in Firefox, Safari, and Opera. So that’s why Panic spelled it that way.

5 Responses to “Helvetica Neue variants for use on the web”

  1. You website looks awesome. Well done! I use “Helvetica Neue” a lot when designing new websites, but wonder if it’s installed on Windows machines as well?

  2. Wow, thanks! You’ve got a pretty awesome-looking site yourself :)

    Yeah, unfortunately Windows users don’t get Helvetica Neue by default, so the best we can do is specify the closest Windows font, Arial, after Helvetica Neue in the font-family declaration.

  3. I just noticed that in Firefox v3 this does not work. FF2 is working fine but Mac OS X 10.5.3 FFv3 rc3 is unhappy.

  4. Yep, you’re right Johnny, I just upgraded to FF3 and these samples just look like Helvetica Neue. Guillermo Esteves has the explanation right here: http://gesteves.com/post/36097597/helvetica-neue-light

  5. Terrific! I feel like I should have known this too but your post is most helpful.

Leave a Reply