I’m Dudley Storey, the author of Pro CSS3 Animation. This is my blog, where I talk about web design and development with , and . To receive more information, including news, updates, and tips, you should follow me on Twitter or add me on Google+.

web developer guide

my books

Book cover of Pro CSS3 AnimationPro CSS3 Animation, Apress, 2013

my other blogs

Massive Head Canon: Intelligent discussion of movies, books, games, and technology.

my projects

A Sass color keyword system for designers. Replaces CSS defaults with improved hues and more memorable, relevant color names.

CSSslidy: an auto-generated #RWD image slider. 3.8K of JS, no JQuery. Drop in images, add a line of CSS. Done.

tipster.ioAutomatically provides local tipping customs and percentages for services anywhere.

Make Your Web Pages More Legible With Ligatures and Kerning Pairs

css / typography

Estimated reading time: 3 minutes

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.

Text with kerning pairs (bottom)

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:

finnegan’s fine fiddles
Text with automatic ligature font substitution (bottom)

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. (In Firefox, kerning pairs and ligatures are automatically engaged if the font is above 20 pixels in size).

CSS3 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 , 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 all browsers, while using text-rendering: optimizeLegibility as a fallback:

p {
text-rendering: optimizeLegibility; /* optional: for older browsers */
-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 {
text-rendering: optimizeLegibility; /* optional: for older browsers */
-moz-font-feature-settings: "kern=1"; /* pre-Firefox 14+ */
-webkit-font-feature-settings: "kern";
-moz-font-feature-settings: "kern"; /* Firefox 14+ */
font-feature-settings: "kern"; /* standard */
font-kerning: normal; /* Safari 7+, Firefox 24+, Chrome 33(?)+, Opera 21+*/


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 .

comments powered by Disqus

This site helps millions of visitors while remaining ad-free. For less than the price of a cup of coffee, you can help pay for bandwidth and server costs while encouraging further articles.