Steve Cochrane

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.

Update (July 9, 2008): The above samples should now mostly work in Firefox 3, and still work great in Safari. For some reason specifying a font-weight of 100 for Ultra Light still renders as Light in Firefox 3, even though that is the lightest possible value. I can’t seem to find any samples of this actually working in Firefox 3, possibly it’s a browser bug? If anyone out there in the blogosphere knows how to get this working please let me know in the comments. Thanks.