For many web designers, CSS webfonts have enough richness and variability to occupy their time. A good developer will carefully deliberate in choosing a strong font family and designing a decent font stack. They will certainly modify font-size, line-height and color to maximize attractiveness and readability of text, and maybe add a little letter-spacing for heading elements, but that’s usually as far as it goes.

A well-designed typeface has more depth to it than most people appreciate. One example of this buried richness are automatic kerning controls: some letters that appear beside each other become much more readable if they are moved closer together. These are known as kerning pairs. In some cases, the letters might be conjoined into a new set of characters, called a ligature.

A good example would be the capital letters W and A. Kerned like every other letter, they appear too far apart in many typefaces: the A should, in most cases, slip in closer under the trailing stroke of the W.

A correctly applied kerning pair effect is subtle, but effective, greatly increasing readability while allowing more glyphs per line of text.

Another example would be the lowercase letters f and i: in many cases, the period on the i will display on top of or very close to of the overhang of the f, causing a visual “splotch” on the page. This can be changed into a ligature:

It is important to understand that these adaptations are built directly into the font: all we need to do is gain access to them. Traditionally, ligatures were created by inserting HTML entities, but in modern browsers it is much easier to turn on the appropriate CSS property.

CSS offers many controls for kerning, but the easiest and fastest is very simple:

body {
	text-rendering: optimizeLegibility;
}

The text-rendering property is supported in all current versions of Firefox, Safari and Chrome, and automatically substitutes kerned pairs and ligatures as appropriate throughout your selection. However, is non-standard, brought into CSS from SVG, and one that has known rendering bugs in Chrome. Browsers should be using two seperate properties to achieve the same results: font-kerning and font-variant-ligatures. Practically, these properties are a little more complex, as they are currently supported with various vendor prefixes and different value interpretations.

To turn on standard ligatures, use:

p {
	font-variant-ligatures: common-ligatures;
}

To gain support in modern browsers:

p {
	-webkit-font-variant-ligatures: common-ligatures;
	/* for iOS and Safari 6 */
font-variant-ligatures: common-ligatures; /* for up-to-date browsers, including IE10 and Opera 21 */
}

For kerning:

p {
	-webkit-font-feature-settings: "kern";
	font-feature-settings: "kern";
	font-kerning: normal;
}

Conclusion

Kerning and ligatures are near-perfect examples of progressive enhancement: users with browsers that do not support the property will still be able to read the text, just without the subtle advantages of advanced CSS typography.

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.