Modern Web Typography: Kerning

February 24, 2014 | 4 Minute Read

Kerning is a very important aspect when it comes to setting type. Unfortunately, until more recent times, it has been left out when it comes to the web.

For those of you that may not be clear on what kerning is, it deals with the spacing between certain pairs of letters letters such as W and A.

Kerning can be built into a font by the font designer or it can be added by the person setting the type. It can increase legibility and is very useful when using large type in a design. Kerning only deals with pairs of letters and is different than letter-spacing/tracking because they deal with the spacing between all letters.

How to Enable Kerning For An Entire Font Family

As I mentioned, kerning can be built into a font by the font designer. We as web designers and developers just have to let browsers know that we want to use it. This can now be done with CSS although there are some tricks to it. Browser support is currently a little finicky at the moment and will require two properties and vendor prefixes to get the best support.

text-rendering

The text-rendering property was included with the SVG specification and is supported by Chrome, Safari, and Firefox.

p {
  text-rendering: optimizeLegibility;
}

The text-rendering property has other values that can be passed to it that do other things. Here’s all of them and what they do:

optimizeSpeed — Applies focus to speed over the other text-rendering properties when rendering text and disables kerning and ligatures.
optimizeLegibility — Applies focus to legibility over the other text-rendering properties when rendering text and enables kerning and ligatures.
geometricPrecision — Applies focus to geometric precision over the other text-rendering properties when rendering text. Allows the aspects of certain fonts that don’t scale well to look better.
auto — Allows the browser to determine how all of the text-rendering properties are applied when rendering text.

font-feature-settings

The font-feature-settings property is a new and experimental CSS property and is in the working draft phase. This property is used to enable/disable certain OpenType features for fonts that have them. Kerning is one of the font features that can be enabled/disabled with the font-feature-settings property. Due to its new-ness it requires vendor specific prefixes and syntax.

p {
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern";
  -webkit-font-feature-settings: "kern";
  -moz-font-feature-settings: "kern";
  -moz-font-feature-settings: "kern=1";
}

How to Fine Tune Kerning For Specific Font Pairs

Enabling kerning for legibility in body text is all fine and dandy but what if you want to fine tune the kerning and have absolute control over a specific paring in a particular heading? This can not be done with plain ol’ CSS just yet. It will require something else like extra html or JavaScript. There are a couple of really handy tools available that can give you this control where you need it.

Kernjs

This is a bookmarklet that lets you click on individual characters on your own website and then drag until you are happy with the way it looks. Once you are done you can simply click on an icon and then copy the CSS. It requires you to add a span for each character that you want to adjust the kerning on and it generates the CSS via negative and positive margins that will be applied to the characters.

Letteringjs

This is a JavaScript library that allows for absolute control over aspects of individual characters. It basically provides a JavaScript function that can be passed to an html element to generate spans with incremented numeric class names for each individual character in the element. Those spans can then be manipulated with CSS however you’d like. It is advised to use this plugin sparingly due to the performance issues that could arise by wrapping too many characters in a page in spans with JavaScript.

Browser Support

This CSS text-rendering and font-feature-settings combination has pretty good browser support working in all modern browsers. It is, however, not supported at all in Chrome on Windows at the moment but likely will be in the near future. Not supported in ie9 and below.

Sources

Brian Treese