Kerning and Ligatures on the Web


In recent years, web fonts have made websites more diverse and unique, as far as typography is concerned. Nonetheless, the electronic display of text in comparison to print still has a way to go – as in the case of kerning and ligatures, for example.
Carefully developed fonts contain so-called kerning tables. Here, the distance between pairs of letters is corrected where necessary, taking into account the letter forms. Moreover, it is possible to use ligatures, in which neighboring letters are combined together. Both generate a more even font appearance and thus increase the legibility of the text.

Although not established as a standard, modern browsers are able to evaluate this information. You can control this with the CSS3 property <text-rendering>. Since the evaluation of kerning and ligature information requires processing power, however, you essentially have the choice of a fast, but imprecise display or a slow, but typographically correct one. In the standard setting <auto>, the browser itself decides which setting to use and when.

text-rendering: optimizeSpeed
Speed is prioritized; kerning information and ligatures are not processed.

text-rendering: optimizeLegibility
Kerning information and optional ligatures are used, to the detriment of the display speed.


The upper words were rendered with the setting text-rendering: optimizeSpeed, the lower ones with text-rendering: optimizeLegibility.


A third option, <geometricPrecision>, prevents minor changes to the font size in favor of the optimal display. Normally, the browser selects the text size that offers the best display, since kerning information does not scale linearly. With this option, you prevent this optimization and retain precisely the requested font size - but with potential losses in the display quality.

As of yet, not all browsers behave in the same manner. For this reason, it is critical to test your specifications in advance. And do not forget that powerful desktop computers can display an optimized page quickly – weaker mobile devices, however, can take an unbearably long time.