Heaven Devoid of Stars – a tale of cross-browser kerning

¶ Over on the Fontdeck Blog I posted a Christmas List for Type Fans. Among the things of beauty listed was this print sold in the I Love Typography store.

It was designed by Stefan Hattenbach of MAC Rhino Fonts, and set in his Tarocco Bold. I love setting type (usually while Her Indoors is watching some rubbish on the telly), and Tarocco is available from Fontdeck so I thought I’d give this print a go. I’m pretty pleased with the result, but it wasn’t without its problems.

When you’re setting type at large sizes like this A2 print, a certain amount of hand kerning is involved, even if the font you’re using includes kerning instructions. (Kerning means nudging letters together or apart, so they look more evenly spaced). I wanted to kern the web text exactly as Stefan kerned his print text, which I did fairly successfully:

Left: My web layout; Right: Stefan’s print layout

The screenshot above-left was taken in Firefox 8 on a Mac. When I looked at the same page in Safari I was disappointed. The differences in letter spacing are small but clear:

Rendering in Safari

But wait! Of course Firefox on a Mac has kerning instructions turned on by default, but Safari needs text-rendering:optimizeLegibility to turn on kerning. So I duly added that property and got this result:

Left: Safari with text-rendering:optimizeLegibility; Right: With Firefox superimposed on top

Safari is now better, but it’s still different to Firefox. There is different spacing between the letters, most noticeable between the T and A of STARS in the final line. Why? Does Safari kern differently? To answer that question we need to look at the markup. Here’s that final line:

OF
<span class="kern1">
  ST
  <span class="kern2">
    A
    <span class="kern3">
      RS
    </span>
  </span>
</span>

I’ve wrapped a span around the word ‘Stars’ and relatively positioned it towards the previous word ‘Of’. Within ‘Stars’, I’ve nested two more spans. Note in particular that the first of those <span> tags splits the ‘T’ and ‘A’.

The Fontdeck Tarocco webfont includes kerning instructions, so now let’s look at Tarocco Bold’s kerning table. We see that there is an instruction to move the A eighty units towards the T. That’s a big kern, as you might expect with such a character pair. What’s clearly happening in Safari is that it sees the <span> tag separating the T and A, and decides that these characters are no longer adjacent and thus should not be kerned. Firefox behaves otherwise – it kerns the character pair despite them being separated by a <span> tag.

For me, Firefox gets it right. I’ll concede the problems I came across are pretty niche, but I believe inline elements should be ignored when it comes to deciding on whether or not to kern adjacent characters.

Cross-browser success

Having said all that, I did manage to get consistent type setting across all modern browsers. The trick was turn off the font’s kerning instructions first, and then re-kern everything manually. The way to turn off kerning, in addition to omitting text-rendering:optimizeLegibility, is with the font-feature-settings property. There are two different syntaxes: the old Mozilla way and the newer CSS 3 way, so you’ll need to include all these lines to be sure:

-moz-font-feature-settings:"kern=0";
-webkit-font-feature-settings:"kern" 0;
-o-font-feature-settings:"kern" 0;
-ms-font-feature-settings:"kern" 0;
font-feature-settings:"kern" 0;

I should point out that, out of all the above properties, only -moz-font-feature-settings is actually supported, and that in Firefox 3.6 and above.

Here’s my final version

Takeaway

If you’re going to manually kern, make sure you turn off the font’s kerning instructions first, thereby ensuring a common starting point and consistency across browsers.

And as a final note, if you like the look of Tarocco Bold (know I do) then you’ll do well to check the Adfont Calendar today (19th December).