Ligature

A ligature is a single glyph that represents two or more characters merged together, designed to resolve typographic collisions and awkward letter combinations. The most common are fi and fl, where the dot of the 'i' or the ascender of the 'l' would clash with the hook of the 'f' in a standard rendering.

Modern OpenType fonts include multiple ligature categories: standard ligatures (fi, fl, ff, ffi, ffl), discretionary ligatures (more decorative combinations like ct or st in classical typefaces), and contextual alternates (forms that change based on adjacent characters). In coding fonts like Fira Code and JetBrains Mono, programming-specific ligatures transform multi-character operators like =>, !=, <=, and -> into unified symbols.

/* Enable standard ligatures (usually on by default in modern browsers) */
.with-ligatures {
  font-family: 'EB Garamond', serif;
  font-variant-ligatures: common-ligatures; /* fi, fl, ff */
}

/* Enable all ligature types */
.rich-ligatures {
  font-family: 'EB Garamond', serif;
  font-variant-ligatures: common-ligatures discretionary-ligatures historical-ligatures;
}

/* Or use the lower-level property for specific control */
.opentype-ligatures {
  font-family: 'EB Garamond', serif;
  font-feature-settings: "liga" 1, "dlig" 1, "clig" 1;
}

/* Enable programming ligatures in code blocks */
code {
  font-family: 'Fira Code', 'JetBrains Mono', monospace;
  font-variant-ligatures: contextual;
  font-feature-settings: "calt" 1;
}

Standard ligatures are enabled by default in most browsers for OpenType fonts, meaning you may already be benefiting from them without knowing. Where ligatures matter most is in display typography: a beautifully set headline using Cormorant Garamond or EB Garamond with discretionary ligatures enabled can show the difference between competent and exceptional typography.

For CSS, font-variant-ligatures is the preferred modern property over the older font-feature-settings approach, though both work. One important caveat: some ligatures can interfere with text selection, find-in-page, and spell checking in certain browsers, so use discretionary ligatures judiciously in body copy.

Historically, the most common ligature — fi — exists because the dot of 'i' collides with the terminal hook at the top of 'f' when the two letters sit adjacent. Before digital typography, this was a purely mechanical problem solved by casting both letters on a single piece of metal. In digital fonts, the ligature persists as a design choice rather than a necessity, but the best implementations are so seamlessly integrated that readers never consciously notice them — they simply experience the text as exceptionally well-crafted.