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

In creative branding, magazine mastheads, posters, and display advertising, discretionary ligatures (OpenType feature tag dlig) add expressive artistic flair. Unlike standard ligatures (liga), which resolve basic character collisions like “fi” and “fl”, discretionary ligatures create decorative connections between unusual character combinations such as “st”, “ct”, “sp”, “Th”, and “ck”. Because discretionary ligatures are decorative and can impede reading speed in long narrative paragraphs, they should never be enabled globally across body copy.

Using CSS properties like font-variant-ligatures: discretionary-ligatures; or font-feature-settings: "dlig" 1;, web designers can apply these connections selectively. Inspecting these glyph mappings inside Safari Web Inspector ensures accurate rendering across macOS and iOS platforms.

Understanding Standard vs Discretionary Ligatures

The difference between ligature types is essential for maintaining readability:

• Standard Ligatures (liga): Solves functional collisions (e.g. the hood of the ‘f’ colliding with the dot of the ‘i’), enabled by default.
• Discretionary Ligatures (dlig): Purely ornamental flourishes designed for headings and titles, disabled by default.

/* High-level standards-compliant CSS declaration */
.masthead-title {
    font-variant-ligatures: discretionary-ligatures;
}

/* Equivalent low-level OpenType tag */
.masthead-fallback {
    font-feature-settings: "dlig" 1;
}

/* Explicit reset for body text */
.article-text {
    font-variant-ligatures: no-discretionary-ligatures;
    font-feature-settings: "dlig" 0;
}

Inspecting Discretionary Ligatures in Safari Web Inspector

Safari Web Inspector allows web authors to verify whether the active typeface supports and renders the dlig feature:

1. Open Safari on macOS and navigate to your display typography page.
2. Right-click the stylized title and select Inspect Element.
3. In the inspection panel on the right, switch to the Fonts tab.
4. Scroll to the Feature Settings > Ligatures section. Safari lists all available OpenType ligature features.
5. Verify that dlig (Discretionary Ligatures) is listed and marked as enabled.
6. In the Styles panel, toggle font-variant-ligatures: discretionary-ligatures; on and off to observe decorative character connections join and separate dynamically.

Authoring Clean Editorial Stylesheets

To apply discretionary ligatures strictly to display scopes:

/* Display Headline Typography */
h1.hero-title,
.brand-wordmark {
    font-family: "Didot", "Bodoni 72", Georgia, serif;
    font-size: 2.5rem;
    font-variant-ligatures: common-ligatures discretionary-ligatures;
    font-feature-settings: "liga" 1, "dlig" 1;
    letter-spacing: 0.02em;
}

/* Guard body copy against ornate ligatures */
p, li {
    font-variant-ligatures: common-ligatures;
    font-feature-settings: "dlig" 0;
}

Testing on iOS Devices via Remote Debugging

To audit display ligatures on mobile Apple devices:

1. Enable Web Inspector in Settings > Safari > Advanced on your iPhone or iPad.
2. Connect the device to your Mac via USB and inspect the page from desktop Safari’s Develop menu.
3. Confirm that discretionary ligatures maintain balanced stroke weights and crisp legibility on mobile Retina screens.

Using dlig produces elegant, publication-grade display typography across all Apple platforms.