Skip to content
fontkind.

What is a ligature?

Lesson 02 · 3 min read · Updated 30 September 2026

In type, a ligature is two or more letters drawn as a single glyph, such as fi, fl or ffi. Switch them on and off below, in the fonts themselves.

Set

CSSfont-variant-ligatures: common-ligatures;

Instrument Serif · 4 ligatures in 25 characters

On: each marked group is drawn as one shape. On by default. They fix collisions, so readers never notice them.

01

Why some letters join

Some pairs of letters collide. The hook of an f reaches to the right, and when an i or an l follows, the hook runs into its dot or its top. A ligature solves the collision by drawing the pair again as one shape. In Instrument Serif, the serif on the board, fi drops the i’s dot under the f’s hook and runs the f’s bar into the i, and ffi turns three letters into a single glyph.

Ligatures are older than printing. Scribes joined letters to write faster, and early printers cast the common pairs as single pieces of metal type. Two ligatures became characters of their own: the ampersand began as the e and t of the Latin et, and the German ß grew from a long s joined to an s or a z.

02

Standard, discretionary and contextual

OpenType fonts sort their ligatures into features, and software switches each one separately. Standard ligatures fix collisions such as fi, fl, ff, ffi and ffl, and browsers turn them on by default. Discretionary ligatures are decorative: the swash that ties c to t, or the joined s and t of an eighteenth-century book. They stay off until you ask for them, as on the board’s second set, in Playfair Display.

A third kind, contextual alternates, changes a letter’s shape to suit its neighbours. Script fonts use them to join letters as a hand would. Coding fonts such as Fira Code use them to draw => and != as single symbols, while every character keeps its own width, so the columns of code still line up.

03

Ligatures on the web

In CSS, font-variant-ligatures controls them: common-ligatures and no-common-ligatures for the standard set, discretionary-ligatures to add the decorative ones, contextual for the alternates, and none to switch them all off. The lower-level font-feature-settings reaches the same features by their four-letter tags: liga, dlig and calt.

A ligature changes only the drawing. The text is still f and i, so copying, searching and screen readers work as usual. And text set with letter-spacing drops its optional ligatures, since letters spaced apart no longer collide.

One catch: a font served by Google Fonts can arrive without its discretionary ligatures. Playfair Display does: it comes with fi and its other standard ligatures, but not the ct, st and Th on the board, which is drawn from the font’s own file. To use them on a site, host the font yourself.

04

When to switch them off

Standard ligatures are right for almost all running text, and a well-made font draws them so that nobody notices. Some settings still read better without them: tables of figures and names, where every character should stand on its own, and headings set in widely spaced capitals, which have no collisions left to fix.

Code ligatures divide programmers. Some find => easier to read as an arrow; others want to see exactly the characters they typed. Language matters too: in Turkish, the dotted and the dotless i are different letters, so an fi that hides the dot could change a word, and fonts made for Turkish avoid it.

05

Try it in the game

  • Kerning game
    Space the Word

    Every letter moves on its own there, ligatures off: space the pairs that fonts often join, and see the typeface’s own spacing.

06

Fonts to open

Serif fonts Monospace fonts

07

Questions

How do I turn off ligatures in CSS?
font-variant-ligatures: none switches off every kind; no-common-ligatures switches off only the standard ones, such as fi and fl. font-feature-settings: "liga" 0 does the same for the standard set.
Is the ampersand a ligature?
It began as one: & is the e and t of the Latin et, written together until they became a character of their own.
Do ligatures change the text?
No. A ligature changes only which glyph is drawn. The characters stay the same, so the word copies, searches and reads aloud as usual.

08

More to learn

Every lesson