EJS logo

Advanced web typography: Kerning

Article illustration for Advanced web typography: Kerning

Kerning has to be one of the most widely-used terms by the typography enthusiast. How often have you found that you’ve been able to prove your typographic integrity by pointing out poorly-kerned type in public places to your long-suffering partner?

And yet it’s one of those typographic controls that remains shrouded in semi-mystery when it comes to web type. Which browsers support kerning? Do you have to manually turn it on? Why are there different way of turning it on? Even as the Creative Director of Adobe Typekit, I personally still often find myself confused. So, for your benefit and for mine, I’m going to attempt a quick round-up on kerning for the web. And at this point I should thank my colleague Bram Stein for his excellent post on the Typekit blog, from which I’ve drawn extensively.

First of all, before we worry about support for kerning in the browser and how we enable it, it’s important to consider the problem from the base level of the font itself. Any decent font worth its salt should contain information on kerning pairs and any given font’s ability to optimise the spacing between two glyphs is dependent on this built-in data. Thankfully, there’s no real difference between web fonts and non-web fonts: if the kerning data is there in, it will most likely be present in the web font you serve to your site.

With that out of the way, let’s take a look at how to enable kerning, because it’s not usually enabled by default (although we’ll get to those specifics in a minute).

The simplest way to turn on kerning is to use text-rendering: optimizeLegibility; , which, depending on the browser, will also enable other OpenType features. Like I said yesterday, though, that this isn’t an official CSS property and in theory could become unsupported at any time. It’s also been known to cause a few issues.

The more future-proof, powerful, and safer way of turning on kerning is to use the font-feature-settings property that I enthused about so much in yesterday’s post. The property allows you to switch on OpenType features one by one and therefore offer greater control over what you are / are not enabling.

At the time of writing, support for font-feature-settings is still in the semi-experimental phase, so we need to use browser prefixes. If you’re being particularly thorough, you might include the slight variations between older and newer versions of Firefox (the third line is for FF14 and below):

p {
  text-rendering: optimizeLegibility; /* Use with caution */
  -moz-font-feature-settings: "kern";
  -moz-font-feature-settings: "kern=1";
  -ms-font-feature-settings: "kern";
  -o-font-feature-settings: "kern";
  -webkit-font-feature-settings: "kern";
  font-feature-settings: "kern";
}

However, it’s worth noting that kerning is turned on by default in Firefox.

In the future, we’ll be able to use font-kerning: normal , which is currently supported by Safari 7 on OS X and iOS. You can find more information about this in the CSS3 spec.

Speaking of Safari 7 on OS X and iOS, this browser also has kerning enabled by default, which means that you don’t need to do anything: if kerning data exists in the font file, it’ll be applied automatically. We can almost excuse Safari for its total lack of font-feature-settings support!

In terms of general browser support, kerning is actually very widely adopted. There’s a very useful and current (at the time of writing) chart in Bram’s article and it’s worth noting that Chrome support is excellent, except on Windows. Sigh!

Manual kerning with CSS

Built-in kerning is all well and good, but what if you want some additional control over your text, especially display type? Doing it manually is supported everywhere if you manipulate the spacing between individual glyphs by using the age-old letter-spacing , but it is of course rather tedious and usually involves wrapping each letter in a span . Thankfully, this is made easy by Dave Rupert’s Lettering.js, which automatically throws spans around individual letters (or individual words) using Javascript. I don’t think I need to go into it here because it’s a pretty popular plugin and widely used, but it’s certainly worth a mention in any discussion on kerning. You might also find Brendan Stromberger’s kern.js bookmarklet quite handy: it builds upon Lettering.js and allows you to visually adjust the kerning on any particular glyph, and then generates some CSS for you to use in your production files.

So that’s kerning. Of the more advanced typographic controls we have over web type, kerning adoption in some shape or form is pretty damn good. For the next post in this series, I’ll be looking at justification and hyphenation, which is where things get a little more complex.