CSS font-feature-settings for OpenType Ligatures

The CSS font-feature-settings property provides low-level access to advanced OpenType typographic capabilities, allowing web developers to explicitly enable or disable font ligatures. Ligatures merge two or more adjacent characters—such as "fi", "fl", or "st"—into a single, cohesive glyph to prevent visual collisions and improve legibility. This article explains how font-feature-settings works, the specific OpenType tags used to control different types of ligatures, and the syntax required to implement them effectively.

Understanding OpenType Ligatures

In typography, certain character pairs can collide awkwardly when rendered side-by-side. For example, the hood of a lowercase "f" often interferes with the dot of an "i" or the ascender of an "l". OpenType fonts solve this by including pre-designed ligature glyphs.

Ligatures generally fall into four categories:

  • Common ligatures: Standard combinations designed to fix collisions (e.g., "fi", "fl", "ff").
  • Discretionary ligatures: Stylistic choices that enhance decorative appeal (e.g., "st", "ct", "Th").
  • Historical ligatures: Traditional character pairs seen in historical manuscripts (e.g., long "s" combinations).
  • Contextual alternates: Dynamic ligatures and character adaptations tailored to surrounding letters, frequently found in script and handwriting fonts.

How font-feature-settings Enables Ligatures

The font-feature-settings property controls these features using four-letter OpenType feature tags. While modern CSS includes the higher-level font-variant-ligatures property, font-feature-settings acts as a direct, low-level override that interfaces directly with the font file’s internal tables.

To activate or deactivate a feature, specify the four-letter tag followed by an integer (1 or on to enable, 0 or off to disable).

Key Ligature Tags

  • "liga": Common Ligatures
  • "dlig": Discretionary Ligatures
  • "hlig": Historical Ligatures
  • "calt": Contextual Alternates

CSS Implementation Examples

To enable common ligatures across a body of text:

p {
  font-feature-settings: "liga" 1;
}

To enable both common and discretionary ligatures simultaneously, separate the tags with a comma:

h1 {
  font-feature-settings: "liga" 1, "dlig" 1;
}

To explicitly turn off all ligatures, set the tags to 0:

code {
  font-feature-settings: "liga" 0, "calt" 0;
}

Best Practices

While font-feature-settings is a reliable method for controlling ligatures, it should be used with awareness of CSS inheritance. Setting font-feature-settings on a child element overrides the entire list of feature settings defined on its parent rather than appending to it. For standard design needs, modern CSS recommendations suggest using font-variant-ligatures as the primary property, reserving font-feature-settings for legacy browser fallbacks or when targeting fonts that do not respond correctly to standard higher-level properties.