Truetype, Font Variants and Antialiasing

Tweet

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.

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • Jeffrey

    this finally makes sense! now i know why website text started looking funny after i installed helvetica on my windows box…

  • Grateful

    I’ve been going mad searching for an explanation for this, thankyou! Disappointing that some mac people are skipping testing for the browser of 85% of their target audience.

  • http://l-c-n.com phiw13

    Is is actually a bug and a spec violation. The css2.1 & 3 texts clearly calls for a ‘family name’ (the property is called font-family after all), in the example given that is ‘Helvetica Neue’. If you want to use the lighter face, you add font-weight:300;. That works in Safari 4b and Firefox 3. Older Gecko/Webkit browser don’t have support for multiple font weight though (they can only display normal and bold). And that fails also in Opera/IE for the same reason. Safari 4b still has some support for the ps-name for some backwards compatibility reason.

    PS – I noticed recently that Windows (XP up to Windows 7) has serious display issues for ‘light’-weight fonts (any), whatever the level of font-smoothing.

  • Shaz

    I had a look around for Guillermo Esteves’ post mentioned here but couldn’t find it anywhere. Could you provide a link to it please?

  • http://www.turtlereality.co.uk jont17

    Surely when developing web sites you need to check what end users are likely to see? It doesn’t matter how beautiful it looks on your Mac if most of your audience are seeing something horrible in IE6 on windows… That is basically the lot of the web designer!

  • http://www.lowter.com lotrgamemast

    Interesting bug. It does show up as Arial for me (Opera 9.6, Win Vista).

  • http://www.sitepoint.com AlexW

    I had a look around for Guillermo Esteves’ post mentioned here but couldn’t find it anywhere. Could you provide a link to it please?

    Sorry Shaz, it’s linked now.

  • royatl

    um, I think your system is configured incorrectly. Anti-Aliasing is normally handled by the system, not the browser (Safari is the exception, as they use a different philosophy of anti-aliasing — i.e. the typeface is technically correct at the expense of a little readability).

    On my systems (XP through Win7), IE, Chrome, and FF display as you would expect, anti-aliased.

    Vista and Win7 are set to anti-alias by default. If you’re on XP you may need to dig around in Display Properties for the correct setting.

  • http://www.sitepoint.com AlexW

    On my systems (XP through Win7), IE, Chrome, and FF display as you would expect, anti-aliased.

    But I’m guessing you also don’t have Helvetica Neue installed either, so you’re seeing Arial most likely.

  • http://www.calcResult.co.uk omnicity

    @phiw13

    “Is is actually a bug and a spec violation”

    I would disagree with that, if there is any error, it is on the part of the CSS developer, not the browser. A specific font-face was requested, and since the OS found a match, that face was used. Arguably the declaration name is wrong, since it goes against current font-tech conventions, though they are rather confused across the board.

  • smith

    ironically enough, Helvetica Neue is used on this page