What is a Ligature used for in Typography?

Learn about what ligatures are used for in typography, and how to turn them on and off with CSS.

What is a ligature?

A ligature is a special character in a font that combines two or more characters e.g. “th” or “fi”. The word “ligature” comes from the Latin word ligatus, which means to tie or to bind.

Ligatures were invented to solve a typesetting problem with the printing press. In the old days, when fonts were made of metal. Some characters had features that made them collide with other characters.

To overcome this problem, ligatures were invented.

Unfortunately, the character collision problem also affects some web fonts. The most common example and the fastest way to find collisions is to put “f” and “i” next to each other, as in “fish”, “wi-fi”, “fiasco”, etc. :

Notice how the dot on i collides with the ascender of the f.

It looks bad, visually, and because it seems out of place compared to the rest of the typeface design, it can even interrupt the reading flow, at least for people with sensitive eyes (e.g. designers).

Ligatures to the rescue

This is how the same font (Alegreya) looks with ligatures turned on:

Notice how the two characters, f and i, are joined together into a single glyph (a glyph is a visual representation of a character). This is called a ligature.

Now take a look at the two fi examples side-by-side:

How to turn on ligatures with CSS

CSS has a text rendering property, fittingly called text-rendering. It accepts a handful of text rendering options, including optimizeLegibility, which turns on ligatures (if available).

You can turn on ligatures on every text element on your website by targeting the parent HTML element:

html {
  text-rendering: optimizeLegibility;
}

Or on individual elements, either by targeting element selectors:

/* Enables ligatures on every heading element */
h1,
h2,
h3,
h4,
h5,
h6 {
  text-rendering: optimizeLegibility;
}

Or via a custom class:

/* Add this class to elements that need ligatures */
.optimize-legibility {
  text-rendering: optimizeLegibility;
}

Don’t enable ligatures without a good reason

Ligatures are not just a tool for fixing character collisions, it’s also a stylistic choice. Some fonts have no collision issues but still allow turning ligatures on, as an alternative style that gives more of an old school look.

I don’t turn on ligatures if they’re not needed, because I prefer that i looks like i (with a visible dot), but that’s a matter of personal preference.

Text rendering performance

Every decision that affects rendering in the browser has a cost. optimizeLegibility can slightly reduce the performance of your font rendering speed on page load. This is why you might want to only turn on ligatures on specific elements, and not on every text element.

If your font has character collision issues, I think it’s worth turning ligatures on, for all your text. It makes you look more professional.

Print typography is less forgiving

The character collision problem is usually easy to solve on the web, even after the fact. Print typography doesn’t offer that luxury. Be careful before you go ahead and print 1000’s of movie posters and embarrass your entire design department.

Make sure to go through each letter with a comb, and make sure no characters are colliding.