Pixelmatrix Design

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.

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:

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.