January 29, 2008
Advanced Web Typography
Have you noticed some sites using custom fonts and font weights without resorting to images or flash? You may have noticed this in Panic’s beautiful Candybar website (see above). This is a great effect for certain fonts such as Helvetica Neue that are included by default with OS X that have additional weights other than “Regular”, “Italic” and “Bold.” Here’s how you do it:
Let’s start from the beginning. Nearly all fonts have a “Regular” weight and a “Bold” weight. Some fonts, especially professional fonts, include additional font weights and variations such as “Light”, “Black”, “Ultra Light”, or “Condensed”. These extra weights can give you a lot more to work with when you’re designing a web page.
Now let’s look at how we typically choose fonts and weights in CSS.
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-weight: bold;
This sets the default font to Helvetica Neue Bold. The font-family property lets you set which specific font you want to use. The font-weight property lets you set the weight of the font that you want to use. There are many options for the font-weight property including 100–900, lighter, normal, bold, and bolder. The problem is, this property doesn’t seem to work the way it’s intended to. If you set a font-weight of “lighter” or 100, the normal weight is still rendered.
So what’s the solution? It’s actually quite simple. Instead of referring to the font and font weight separately, we need to specify both the font and it’s weight in the font-family property. To do this, you need to know the PostScript name of the font you want to use. For Helvetica Neue Light, it’s “HelveticaNeue-Light”. To find the PostScript name of the specific font you want to use you can use Font Book.
Simply open Font Book (located in your Applications folder under OS X), then locate the font you want to use. Make sure you’ve selected a font weight and hit Command - I, or select Preview → Show Font Info. You can see where the PostScript name is listed in the screenshot above.
Now, to set the style, you simply use the PostScript name of the font inside quotes like this:
font-family: “HelveticaNeue-Light”;
And that’s it! A very simple way to use more advanced fonts on the web. Even though it’s possible to use all sorts of fonts you may have on your system, I caution you to only use widely distributed fonts (like Helvetica Neue) for your website (people without the font you’re using installed, won’t see the same font).
Update
Alex points out in the comments that this only works with WebKit, and to add Firefox/Camino/Gecko compatibility you should also include the full font name. Todd pointed out that you should always include alternates for other browsers (such as IE for example) and operating systems that may not include the font you’ve chosen. Just separate your alternates with a comma.
font-family: “HelveticaNeue-Light”, “Helvetica Neue Light”, Helvetica, Arial, sans-serif;
As a PC user, I just wanted to recommend the use of alternative font names (e.g. “Helvetica, Arial, sans-serif”, which on my unenlightened laptop all resolve to Arial). Helvetica Neue may be widely distributed on Macs, but my and most other PCs have never heard of it, and lacking an alternate CSS font, will go with the default font. The list of widely distributed fonts across all OSes is, sadly, rather small.
@Todd,
You’re absolutely right. There should always be more than one typeface listed in the CSS. This is a tip intended for mac users and for people with a large mac audience.
Thanks for pointing that out though!
Windows never got the license from Linotype or whoever that owns Helvetica Neue so they created Arial.. (Gotta watch that documentary.) Its actually kind of a hard font to find on a PC.
So, great technique but alas only useful for sites where your core user-base is mac heads, otherwise you end up designing for a font that just gets turned into arial against your will, bleh
I just wanted to point out that only WebKit understands PostScript names specified in font-family; if you want Gecko-based browsers (like Firefox and Camino) to use these fonts as well, you should specify the full name in addition to the PostScript name, like so:
font-family: “HelveticaNeue-Light”, “Helvetica Neue Light”;
I had to learn this the hard way for a very large project I did a while back. Luckily, the project is for a touch-screen kiosk so I can choose to run only Safari. But as other commenters mentioned, doesn’t work outside Safari.
Interesting post, Josh. I’ve seen this pop up in more and more sites recently, especially with either Helvetica or Myriad. I really dislike people setting body text in Myriad, though, it’s often included on Windows systems and is unhinted, resulting in horrible look of text, and on Mac OS it doens’t look great either (worse than Lucida).
@Alex
Thanks for the great tip! I’ve added it into the post.
@Sebastiaan
Yeah, I agree with you about Myriad as body copy. Not such a great look. It does look good in headings though. See Cameron i/o for example.
@PC Heads (Windows or Linux).
Great Helvetica-like font for free. MG Open Moderna. Just FYI. The site may be in Greek, but the font is there. Actually there are a few nice fonts here. Link to get it:
http://www.ellak.gr/fonts/mgopen/
I have Helvetica Neue Light installed on my PC and these sites that insist on using it are STILL unreadable - this is a trend which needs to end!
Great article, helped me troubleshoot misbehaving Helvetica on a site I’m working on right now.
PS There are no weights in your final image, despite the heading.
This is a test again
Hi Josh, this certainly is a very elegant solution. Helvetica has always been my favourite typeface. It’s a shame that it renders so poorly on Windows machines though. Keep up the good work!