Ligature

Ligatures are enabled in CSS with font-feature-settings: "liga" 1. They merge character pairs that would otherwise produce awkward collisions. Common ligatures include fi, fl, and ft. Programming ligatures like => and != are a separate category handled by the font renderer, not the browser's text engine. Not all fonts include ligature glyphs; confirm before relying on them. Use the variable font tester to enable and disable ligatures and see the difference.

Enabling ligatures for all languages. Some languages use letter combinations that look like ligatures but should remain separate. German Tz, Vietnamese, and some Baltic languages are common casualties of over-aggressive ligature settings.

Assuming ligatures work in all contexts. Ligatures require OpenType support and browser support. In plain text exports, PDFs, or old email clients, ligature glyphs may display as the underlying characters instead.

Ligatures exist because pairs like fi and fl look wrong when their strokes collide or the dot and stem trip over each other. Standard ligatures fix those collisions and are on by default in most text. Discretionary ligatures are decoration by design, used for a historic feel, and should be turned on only where a layout calls for ornament. Programming ligatures like the arrow in a code editor are a third category, bound to fonts like JetBrains Mono.

In CSS the switch lives in font-variant-ligatures, and the default for normal text is already good. The cases that need work are the decorative ones: if a wordmark or pull quote should wear its ligatures, apply font-feature-settings: \"liga\" 1, \"dlig\" 1 and test the result on the actual string. Not every font ships a stylistic set, so check the font inspector to see which features a family really exposes before you build a headline around one.