What are ligatures and when should you use them?

A ligature is a single glyph that replaces two or more characters that would otherwise collide or look awkward next to each other. The classic examples are "fi" and "fl", where the hooked top of the f runs into the dot of the i or the top of the l, so type designers draw a combined shape that flows cleanly. Ligatures are stored in the font as OpenType features, and browsers apply the standard set (liga) and contextual alternates (calt) automatically when a font contains them. You should leave standard ligatures on for body text in most proportional fonts, use decorative or discretionary ligatures only for display text, and turn them off in a few specific places such as letter-spaced labels, some code samples, and text where each character must be visually distinct.

Ligatures are small details, but they're one of the differences between text that looks typeset and text that looks merely displayed. They also cause real confusion in code editors and data interfaces, where combining characters can make != look like a single symbol. In this article you'll learn where ligatures came from, the different types, how they affect readability, accessibility and search, how to control them in CSS, and how to decide when to use them.

A Brief History

Ligatures date back to handwriting. Scribes joined common letter pairs to write faster, and early printers kept the habit because metal type couldn't overlap. If an f had an overhanging top, the next letter physically blocked it, so foundries cast combined sorts such as "fi", "fl", "ff", "ffi" and "ffl" as single pieces of metal.

Some ligatures became letters in their own right. The ampersand began as a ligature of "e" and "t", the Latin word for "and". The German "ß" developed from a ligature of long s and s or z. The letters "æ" and "œ" survive in some languages and in traditional English spellings.

When digital typesetting arrived, ligatures became optional features in the font. OpenType formalised this with feature tags, which is what CSS controls today.

Types of Ligature

OpenType divides ligatures into groups, each with its own tag:

• Standard ligatures (liga): The functional pairs such as fi, fl, ff, ffi and ffl. They fix collisions and are designed to go unnoticed. Browsers enable them by default.
• Contextual alternates (calt): Not strictly ligatures, but they change glyphs based on neighbouring characters. Script fonts use them to connect letters naturally, and coding fonts use them for operator ligatures. Also on by default.
• Discretionary ligatures (dlig): Decorative combinations such as "ct", "st" or "Th" with flourishes. They draw attention to themselves, so they're off by default.
• Historical ligatures (hlig): Archaic forms such as the long s combinations used in older printing. Off by default.
• Required ligatures (rlig): Forms that a script needs to be correct, such as the lam-alef combination in Arabic. These are always applied and can't be switched off with CSS ligature properties.

Not every font has every type. Many sans-serif fonts have no fi ligature at all because their f doesn't collide with the i in the first place.

Do Ligatures Help Readability?

Standard ligatures exist to remove distractions. When an f crashes into an i, readers may not consciously notice, but the collision creates a dark spot in the texture of the paragraph. A well-drawn ligature keeps the colour of the text even. That's a refinement rather than a dramatic improvement, which is why standard ligatures are on by default but rarely discussed.

Discretionary ligatures are the opposite. They're meant to be noticed and add character to headings, logos and invitations. In body text, decorative joins slow reading and look affected.

A sensible rule of thumb:

• Body text: Standard ligatures and contextual alternates on, discretionary off.
• Headings and display text: Consider discretionary ligatures if the font has attractive ones and they suit the tone.
• Logos and wordmarks: Use whatever looks best, but outline the final artwork or test it carefully.
• Interfaces, labels and data: Often better without ligatures, especially if letter spacing is applied.

Controlling Ligatures in CSS

The high-level property is font-variant-ligatures. It reads clearly and doesn't interfere with other OpenType settings.

/* The browser default for most text */
p {
  font-variant-ligatures: normal;
}

/* Explicitly keep standard ligatures and contextual alternates */
.article-body {
  font-variant-ligatures: common-ligatures contextual;
}

/* Add decorative ligatures to a display heading */
.hero-title {
  font-variant-ligatures: common-ligatures discretionary-ligatures;
}

/* Turn every ligature and contextual alternate off */
.no-ligatures {
  font-variant-ligatures: none;
}

/* Keep contextual alternates but drop the standard fi and fl joins */
.subtle {
  font-variant-ligatures: no-common-ligatures;
}

The keyword values are:

Value	Feature	Effect
normal	Default	Font's default features apply
none	All	Disables ligatures and contextual alternates
common-ligatures / no-common-ligatures	liga, clig	Standard ligatures on or off
discretionary-ligatures / no-discretionary-ligatures	dlig	Decorative ligatures on or off
historical-ligatures / no-historical-ligatures	hlig	Archaic ligatures on or off
contextual / no-contextual	calt	Contextual alternates on or off

You can also use the low-level syntax:

.hero-title {
  font-feature-settings: "dlig" 1;
}

Prefer font-variant-ligatures, though. A later font-feature-settings declaration on the same element replaces the whole list, so it's easy to lose other features by accident.

Ligatures and Letter Spacing

When letter-spacing is set to anything other than zero, browsers disable optional ligatures automatically. The CSS Text specification recommends this because a spaced-out word with a joined "fi" in the middle looks broken. You don't need to do anything, but it explains why ligatures vanish on tracked-out labels:

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  /* Optional ligatures are dropped automatically here */
}

If a design calls for both letter spacing and a specific ligature, such as in a logo, the reliable approach is to set the wordmark as an SVG.

Ligatures in Code and Coding Fonts

Coding fonts such as Fira Code, JetBrains Mono and Cascadia Code include programming ligatures. They use contextual alternates to draw sequences like =>, !=, === and >= as joined symbols. The underlying characters remain separate, and the joined form takes up the same number of monospace cells, so alignment is preserved.

Opinions are split:

• In favour: Some developers find operators easier to scan when they look like the mathematical symbols they represent.
• Against: Others find that a single ≠ shape hides what they actually need to type, which matters most when teaching or reading unfamiliar code. Joined forms can also be confused with genuine Unicode symbols.

On a website, the safest default for code samples is to turn programming ligatures off, because readers copy and type what they see:

pre,
code,
kbd,
samp {
  font-family: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  font-variant-ligatures: none;
}

If your audience is experienced developers and the brand uses a ligature-heavy coding font, you might leave them on in decorative contexts and off in tutorials. In your own editor it's a personal choice. In VS Code, for example, the setting lives in settings.json:

{
  "editor.fontFamily": "'Fira Code', Menlo, monospace",
  "editor.fontLigatures": true
}

Ligatures, Accessibility and Search

Font ligatures are a rendering detail. The browser draws one glyph, but the text in the document is still the separate letters. That means:

• Screen readers read the original characters.
• Find in page and search engines match the letters normally.
• Copy and paste gives you the separate characters.

The exception is when content contains Unicode ligature characters such as U+FB01 (the precomposed "fi"). These sometimes appear when text is pasted from PDFs. They can break search, sorting and screen reader pronunciation, so normalise them out of your content. In JavaScript, Unicode compatibility normalisation does this:

const pasted = "financial flow";
const clean = pasted.normalize("NFKC");

console.log(clean);
console.log(clean.length);

financial flow
14

Run this kind of clean-up on imported content or in your CMS before saving.

Ligatures in Other Scripts

In many writing systems, ligatures and contextual forms are not decorative at all. Arabic letters change shape depending on their position in a word and join to their neighbours, and some combinations, such as lam followed by alef, must be rendered as a ligature. Devanagari and other Indic scripts form conjuncts when consonants combine. These are handled by required features and the text shaping engine, not by font-variant-ligatures.

Be careful with blanket rules. A global * { font-variant-ligatures: none; } doesn't break required ligatures, but it does disable contextual alternates, which some scripts and script-style fonts rely on for correct joining. Target the specific elements where you want ligatures off.

/* Good: targeted */
.data-label,
pre,
code {
  font-variant-ligatures: none;
}

When to Turn Ligatures Off

Leave standard ligatures alone in most body text. Consider disabling them in these cases:

1. Letter-spaced text: Browsers usually do this for you.
2. Code samples and command-line instructions: Readers need to see every character they'll type.
3. Passwords, codes and identifiers: Coupon codes, API keys and serial numbers should show each character clearly.
4. Fonts with poorly drawn ligatures: Some free fonts include ligatures that look worse than the unjoined letters. Look at your own text at the sizes you use.
5. Monospaced data: Joined glyphs can obscure the column structure.

When in doubt, compare. Put a paragraph full of words like "office", "affluent" and "fluffier" on a test page, and view it with and without ligatures:

<p class="with">The office staff found the affluent, fluffier soufflé difficult.</p>
<p class="without">The office staff found the affluent, fluffier soufflé difficult.</p>

<style>
  .with    { font-variant-ligatures: common-ligatures; }
  .without { font-variant-ligatures: none; }
</style>

If you can't see a difference, the font either has no ligatures or its f doesn't collide, and the setting doesn't matter for that font. To confirm which features a font actually includes, see what OpenType features are.

---

FAQ: Ligatures

---

Conclusion

Ligatures are joined glyphs that solve collisions between letters like f and i, and they've been part of typesetting since the earliest printed books. Browsers apply standard ligatures and contextual alternates by default, which is right for most body text, while discretionary and historical ligatures are best kept for headings and display work where personality matters more than invisibility.

Control them with font-variant-ligatures rather than the low-level syntax, turn them off where every character must be clear, such as code samples, identifiers and letter-spaced labels, and clean precomposed ligature characters out of imported content. Above all, look at your own text in your chosen font, because the right decision depends on how well the designer has drawn them.