How to Inspect CSS font-feature-settings Discretionary Ligatures in Safari Web Inspector

OpenType fonts contain a rich variety of typographic ligatures designed to prevent awkward letter collisions and elevate document elegance. While standard ligatures (such as “fi”, “fl”, and “ffi”) are typically enabled by default across modern browser rendering engines, decorative discretionary ligatures (such as “ct”, “st”, “Th”, and “ck”) and historical ligatures remain disabled to preserve standard modern reading speeds. In literary editorial layouts, branding mastheads, and luxury retail sites, activating discretionary ligatures imparts distinctive craftsmanship. Safari Web Inspector includes advanced typography tools to inspect OpenType features live. This guide explains how to audit discretionary ligatures in Safari.

Understanding Standard vs. Discretionary Ligatures

Modern typography differentiates between multiple ligature categories:

• Standard Ligatures (liga / font-variant-ligatures: common-ligatures): Functional letter pairings designed to avoid glyph crashes (e.g. dot of “i” colliding with hood of “f”). Enabled by default.
• Discretionary Ligatures (dlig / font-variant-ligatures: discretionary-ligatures): Decorative, stylized letter connections (e.g. connecting the crossbar of “c” and “t”, or linking “s” and “t”).
• Historical Ligatures (hlig / font-variant-ligatures: historical-ligatures): Archaic ligatures such as the long “s” ligature combinations (“&s;t”).
• Contextual Alternates (calt): Dynamic glyph substitutions that adapt depending on neighbouring characters.

Configuring Ligatures in CSS

Author clean declarations using high-level CSS properties, pairing with low-level font-feature-settings fallbacks:

/* Masthead and luxury branding elements */
.brand-title,
.editorial-pullquote {
  font-family: "Caslon Pro", "Adobe Garamond Pro", serif;
  font-size: 2.25rem;
  line-height: 1.3;
  
  /* Modern high-level CSS property */
  font-variant-ligatures: common-ligatures discretionary-ligatures;
}

/* Explicit low-level OpenType tag fallback */
@supports not (font-variant-ligatures: discretionary-ligatures) {
  .brand-title {
    font-feature-settings: "liga" 1, "dlig" 1;
  }
}

Inspecting OpenType Features in Safari Web Inspector

1. Launch Safari on macOS and open your editorial web page.
2. Right-click the pullquote or headline and select Inspect Element.
3. In Web Inspector, open the Elements tab and locate the Computed panel in the right sidebar.
4. Scroll down to the Fonts section and locate the active typeface family.
5. Expand the OpenType Features expandable drawer. Safari Web Inspector enumerates all supported layout features present inside the font binary.
6. Verify that dlig (Discretionary Ligatures) is checked and active.

Testing Dynamic Glyph Replacements Live

1. In the Styles panel, locate the font-variant-ligatures declaration.
2. Click inside the value and type no-discretionary-ligatures.
3. Watch the rendered text in the Safari viewport: characters like “ct” and “st” immediately decouple into separate individual glyphs.
4. Restore discretionary-ligatures to observe the fluid OpenType ligature stroke join seamlessly.