CSS font-feature-settings for OpenType Typography

Modern web fonts frequently contain advanced typographic capabilities embedded directly within their OpenType tables that are disabled by default. The CSS font-feature-settings property provides a direct mechanism to activate these features—including discretionary ligatures, tabular numbers, true small caps, and stylistic alternates. By leveraging four-character OpenType feature tags, developers can bridge the gap between static print design and dynamic web typography, achieving refined visual balance and enhanced readability.

Understanding the font-feature-settings Property

OpenType fonts use standardized four-letter tags to define typographic behaviors and alternate glyph sets. The CSS font-feature-settings property acts as a low-level control switch that passes these tags directly to the browser's text-rendering engine.

The syntax accepts comma-separated strings representing the feature tag, followed by an optional binary toggle (1 or on to activate; 0 or off to deactivate) or an integer index:

.typography-advanced {
  font-feature-settings: "liga" 1, "smcp" 1;
}

While newer, high-level properties like font-variant-numeric and font-variant-caps are preferred for common tasks, font-feature-settings remains critical for accessing specialized features, custom stylistic sets, or ensuring legacy browser compatibility.

Key OpenType Features and Their Uses

1. Ligatures (liga, dlig)

Ligatures merge adjacent characters to avoid awkward collisions, such as the crossbar of an "f" colliding with the dot of an "i".

• Common Ligatures (liga): Standard typographic corrections (e.g., "fi", "fl").
• Discretionary Ligatures (dlig): Stylistic, decorative connections (e.g., "st", "ct").

.article-headline {
  font-feature-settings: "dlig" 1;
}

2. Tabular Figures (tnum)

By default, numbers are proportional: the digit "1" takes up less horizontal space than the digit "8". In financial tables, timers, and data dashboards, this causes vertical misalignments. The tnum feature renders all numerals with identical bounding-box widths.

.data-table, .timer {
  font-feature-settings: "tnum" 1;
}

3. True Small Caps (smcp)

When browsers apply standard text-transform: uppercase with reduced font size, the resulting letters look unnaturally thin and poorly spaced. OpenType small caps are purpose-drawn by type designers to match the stroke weight and proportions of lowercase letters.

.abbreviation {
  font-feature-settings: "smcp" 1;
}

4. Stylistic Sets (ss01 through ss20)

Many contemporary typefaces offer alternate glyph shapes—such as a single-story "a" instead of a double-story "a", or a slashed zero. Designers group these alternates into stylistic sets numbered from 01 to 20.

.brand-heading {
  font-feature-settings: "ss01" 1, "ss03" 1;
}

5. Fractions (frac)

Typing "1/2" usually renders a standard slash flanked by full-sized numerals. The frac feature automatically converts standard slash-separated numbers into properly scaled numerator and denominator pairs separated by an angled fraction bar.

.recipe-ingredients {
  font-feature-settings: "frac" 1;
}

Best Practices and Considerations

• Font Capability: The font-feature-settings property only functions if the selected font file includes the specific OpenType tables. If a font does not include real small caps or tabular figures, declaring the property produces no visible change.
• Inheritance and Overrides: Because font-feature-settings is a primitive property, applying a new rule replaces all previously defined tags on that selector rather than merging them. Group all required tags in a single declaration to avoid accidentally disabling inherited features.
• Progressive Enhancement: Use high-level CSS properties (font-variant-*) as the primary approach for standard features, reserving font-feature-settings for stylistic alternates or instances where granular control is explicitly required.