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):
text-rendering: optimizeLegibility; /* Use with caution */
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
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
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.