Attaboy Media

To boldly go where Helvetica Neue has gone before

Friends don’t let friends use Helvetica when Helvetica Neue will do. But on OS X, Helvetica Neue Bold has a strange and infuriating trait: it shifts the baseline and increases the leading (line height) of the type by 1 pixel compared to Helvetica Neue Normal. Don’t believe me? Check it out — watch the text dance up and down:

This manifests itself everywhere in OS X (starting in 10.6 I believe, but still true in 10.7), but it’s particularly noticeable on the web when you’re trying to, say, line up a bold label with float: left with some normal text: the bold text will appear one pixel off and thus seem misaligned.

I made an interesting discovery today however: only certain line-height values trigger this. The general pattern in WebKit browsers (Safari and Chrome) is that alternating values trigger the effect. So 14px on 18px looks fine, but 14/19 doesn’t. 14/20 is okay, 14/21 isn’t. There’s a little exception as line-height approaches font size, where 1 off is okay, but 2 or 3 off isn’t. Here’s a table of what works and doesn’t in WebKit:

For example — assuming you’re reading this on OS X in Chrome or Safari:

Bold not bold (font-size 18px; line-height 20px)

Boldnot bold (font-size 18px; line-height 21px)

Sadly, everything’s a bit different in Firefox. Stay tuned while I explore that.