Ligature

A ligature is a glyph formed by visually combining two or more adjacent characters into a single, unified shape. The most familiar examples in Latin typography are fi, fl, ff, ffi, and ffl -- combinations where the dot of the i or the crossbar of the f would collide with neighboring letters, creating an awkward gap or overlap without the ligature form.

Historical Context

Ligatures originate from handwriting and early movable type, where certain character combinations produced mechanical collisions between metal sorts. Typesetters used pre-combined pieces to solve this problem. In digital typography, ligatures became optional OpenType features rather than technical necessities, though they remain valuable for aesthetic quality and readability.

Unicode Ligature Code Points

Some common ligatures have dedicated Unicode code points, though their use is generally discouraged in plain text because they complicate searching and copy-paste behavior:

U+FB00  ff  LATIN SMALL LIGATURE FF
U+FB01  fi  LATIN SMALL LIGATURE FI
U+FB02  fl  LATIN SMALL LIGATURE FL
U+FB03  ffi LATIN SMALL LIGATURE FFI
U+FB04  ffl LATIN SMALL LIGATURE FFL
U+0152  OE  LATIN CAPITAL LIGATURE OE
U+00E6  ae  LATIN SMALL LETTER AE

The ae and oe characters occupy a gray area -- they began as ligatures but have become independent letters in some languages (Danish, Norwegian, French).

OpenType Ligatures in CSS

Modern fonts store ligature data in OpenType feature tables. CSS provides control over which categories are active:

/* Enable standard ligatures (fi, fl, ff etc.) -- on by default in most browsers */
body {
  font-variant-ligatures: common-ligatures;
  font-feature-settings: "liga" 1, "clig" 1;
}

/* Disable all ligatures (useful for letter-spaced headings) */
.no-ligatures {
  font-variant-ligatures: no-common-ligatures;
  font-feature-settings: "liga" 0;
}

/* Enable discretionary ligatures (decorative, font-specific) */
.decorative {
  font-variant-ligatures: discretionary-ligatures;
  font-feature-settings: "dlig" 1;
}

/* Enable historical ligatures */
.historical {
  font-variant-ligatures: historical-ligatures;
  font-feature-settings: "hlig" 1;
}

When to Disable Ligatures

Ligatures should typically be disabled when letter-spacing is applied. Increased tracking breaks the natural proximity that makes ligatures visually correct, producing oddly joined characters within wide text:

/* Letter-spaced headings look wrong with ligatures */
.heading-spaced {
  letter-spacing: 0.15em;
  font-variant-ligatures: no-common-ligatures;
}

Also disable ligatures in monospace/code contexts where character-level alignment matters:

code, pre {
  font-variant-ligatures: none;
}

Ligatures in Other Scripts

Ligatures are not just a Latin-script phenomenon. Arabic script requires contextual joining forms that function like mandatory ligatures -- the letter lam followed by alef must produce the lam-alef combined form. Hebrew, Devanagari, and many other scripts also have required or optional ligature-like combinations handled through OpenType rlig (required ligatures) and shaping engines like HarfBuzz.

Impact on Search and Accessibility

When a font renders fi as a single ligature glyph, the underlying text still contains two separate code points (f + i). This is transparent to search and copy-paste. However, if you use the Unicode ligature code points directly (U+FB01), searching for fi will not match -- a usability problem that makes the Unicode ligature characters unsuitable for body text.