Programming

Truetype, Font Variants and Antialiasing

    Alex Walker
    Share

    TypetrisI came across an interesting little CSS quirk while looking one of the Panic.com web sites. The Panic guys are perhaps best known for their well-loved and respected Coda editor and Transmit FTP client.

    Firefox and Safari on Windows rendering Panic.com's Candybar web site.Panic always use lovely big, rich, cartoony graphics to decorate their pages but the type looked unusually rough and chunky on my system. Sure, Mac and PCs take different approaches to type rendering, but this was something else.

    So, what exactly was going on here?

    Digging into their CSS I found some interesting stuff. Rather than calling the font by its font-family name (for instance, ‘Helvetica Neue‘) and setting the weight and style with the font-weight and font-style attributes respectively, the CSS directly referenced the PostScript name for that truetype font — “HelveticaNeue-Light”.

     
body {
font-family: "HelveticaNeue-Light", Helvetica, Arial, sans-serif;
}

    Now, I didn’t know this was allowed, but doing a little more research I came across Guillermo Esteves’ post on the matter from about 12 months ago. Ironically he noticed the difference because it looked so nice on his system. According to Guillermo:

    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

    It certainly is a mighty purdy look in Safari anywhere, and I could see why you would want to achieve this look. However the result is currently uniformly yuck on Firefox, Opera, Chrome and Internet Explorer for Windows users that have that font (as I obviously do).

    Linking italic font variants
    In fact, I did some tests (right) using the italic variants which made me want to scrape out my eyeballs.

    It also appears to do nasty things to Linux users. According to a comment left by Phillip Barnhart ‘ the page .. is almost completely unreadable on FireFox 3 and Konquorer on Linux.’

    It seems most non-Mac browsers can’t ignore this font declaration if the font is resident, but they’re also not very good at rendering it nicely either.

    Of course, Panic makes Mac software for Mac users and clearly know their audience. Helvetica Neue also isn’t a common Windows font so I’m assuming most Windows users are seeing Arial at the Candybar site (let me know if I’m wrong), so no big deal.

    Nevertheless, just in case there’s a temptation for developers to rejoice in its Mac loveliness and start using this technique with more common font variants, I thought it was worth pointing out the nastiness it potentially brings.