How to Inspect CSS font-variant-ligatures Discretionary Alternates in Safari Web Inspector

While standard common ligatures (such as “fi” and “fl”) are designed to resolve awkward character collisions in everyday typography, discretionary ligatures (such as “ct”, “st”, “Th”, and “sp”) are artistic typographic flourishes cut by type designers to impart a decorative, historical, or calligraphic elegance. The font-variant-ligatures: discretionary-ligatures property provides declarative access to OpenType dlig glyph tables. Apple Safari provides native visual inspection tooling within Safari Web Inspector to inspect and validate discretionary ligature substitutions in real time.

Distinction Between Common and Discretionary Ligatures

OpenType fonts distinguish between functional and decorative character combinations:

• Common Ligatures (liga): Practical substitutions (fi, fl, ff) enabled by default in modern browsers to prevent letter collisions.
• Discretionary Ligatures (dlig): Decorative substitutions (ct, st, ck, Th) that dramatically alter visual style and are disabled by default to maintain general reading speed.

Applying font-variant-ligatures: discretionary-ligatures selectively activates these ornate letter pairings for book titles, vintage editorial headers, and literary pull quotes without corrupting plain-text copy.

Configuring Strict Discretionary Ligatures in CSS

To style classic book titles or editorial mastheads with ornate discretionary ligatures:

/* Apply discretionary ligatures across classical literature excerpts */
.classical-pull-quote {
  font-family: "EB Garamond", "Caslon", serif;
  font-variant-ligatures: discretionary-ligatures common-ligatures;
  font-size: 1.25rem;
  line-height: 1.7;
}

/* Reset to standard ligatures for dense body copy */
.standard-editorial-body {
  font-variant-ligatures: common-ligatures no-discretionary-ligatures;
}

This allows designers to enrich heading aesthetics while ensuring dense body text remains clean and readable.

Inspecting Discretionary Ligatures in Safari Web Inspector

Safari Web Inspector allows web authors to verify active OpenType ligature tables directly from the visual browser interface:

1. Launch Safari and navigate to Develop > Show Web Inspector (Cmd+Option+I on macOS).
2. Select the Elements panel and click on an element containing historical text pairs (e.g. “Action” or “Structure”).
3. In the right-hand details pane, click the Font icon in the inspector toolbar.
4. Scroll down to the Font Variant and OpenType Features sections.
5. Locate the Discretionary Ligatures (dlig) feature toggle.
6. If the active font contains OpenType dlig tables, Safari highlights the feature with a blue status badge. You can toggle switches directly to preview visual transformations in real time.

Diagnosing Typography Support Pitfalls

If discretionary ligatures fail to display, consider these troubleshooting steps:

• Letter-spacing interference: Applying non-zero letter-spacing in CSS automatically disables OpenType ligatures. Ensure letter-spacing: normal on stylized quote elements.
• Preserving tables during subsetting: Confirm that web font compressors do not discard the dlig OpenType table when building lightweight WOFF2 bundles.