Ligature

What is a Ligature?

A ligature is a single glyph that replaces a sequence of two or more characters to improve their visual appearance or historical authenticity. The classic example is the fi ligature: when "f" and "i" appear together, the hook of the lowercase f can collide with the dot of the i. A well-designed font replaces this pair with a single unified glyph (fi) where the dot is absorbed into the f's arc.

Ligatures exist on a spectrum from purely aesthetic to semantically meaningful. Typographic ligatures (fi, fl, ffi, ffl, ft) exist solely for visual harmony. Historical ligatures like æ (ae) and œ (oe) started as ligatures but became independent characters with their own Unicode code points and linguistic identities.

Unicode Ligature Characters

Several common ligatures are encoded as standalone Unicode characters:

The Unicode Standard includes these for compatibility with legacy encodings, but recommends using the component characters (fi) rather than the ligature code point (fi) for modern text — the font's OpenType rendering engine will apply the ligature automatically when appropriate.

How OpenType Ligatures Work

Modern fonts implement ligatures through OpenType GSUB (Glyph Substitution) tables. The font specifies rules: "when glyph IDs 42 and 46 appear in sequence, substitute glyph ID 312." This substitution happens invisibly in the text shaping pipeline.

OpenType defines several ligature feature tags:

• liga — Standard ligatures (fi, fl): on by default in most renderers
• dlig — Discretionary ligatures (ct, st, Th): must be explicitly enabled
• hlig — Historical ligatures (long-s forms): for scholarly use
• calt — Contextual alternates: character-level substitutions by context

Enable them in CSS:

/* Enable all standard and discretionary ligatures */
p {
  font-variant-ligatures: common-ligatures discretionary-ligatures;
  /* or shorthand: */
  font-feature-settings: "liga" 1, "dlig" 1;
}

/* Disable ligatures (e.g., in code blocks) */
code {
  font-variant-ligatures: no-common-ligatures;
}

Coding Fonts and Ligatures

Programming fonts like Fira Code, JetBrains Mono, and Cascadia Code use ligatures to render multi-character operators as unified symbols:

These are display-only — the underlying text remains !=, not ≠. This means search, copy-paste, and compilation are unaffected.

Quick Facts