How to Inspect CSS font-variant-alternates Stylistic Sets in Safari Web Inspector

Advanced OpenType typography offers digital designers fine-grained control over letterforms through stylistic sets. Rather than relying on low-level font-feature-settings numeric strings, modern typography standards introduce font-variant-alternates and the companion @font-feature-values at-rule. Apple Safari provides robust rendering and visual inspection tooling for these typographic features via Safari Web Inspector.

The Value of font-variant-alternates Over Raw Feature Strings

Historically, activating OpenType stylistic sets required writing code such as font-feature-settings: "ss01" on, "ss02" on;. This legacy syntax presents significant maintenance challenges: feature tags are cryptic, values easily overwrite one another across cascading rules, and intent is hidden behind four-character technical codes.

The modern CSS Fonts specification resolves this through semantic naming. By binding human-readable identifiers to OpenType features inside @font-feature-values, developers can write self-documenting stylesheets:

/* Define human-readable stylistic sets for the brand typeface */
@font-feature-values "Inter Variable" {
  @styleset {
    open-digits: 1;
    compact-lowercase-a: 2;
    curved-quotes: 3;
    disambiguated-glyphs: 4;
  }
}

/* Apply specific stylistic sets semantically */
.editorial-lead-paragraph {
  font-family: "Inter Variable", sans-serif;
  font-variant-alternates: styleset(open-digits, disambiguated-glyphs);
}

Inspecting Stylistic Sets in Safari Web Inspector

Safari Web Inspector features a dedicated Font details panel that illuminates enabled and candidate OpenType glyph substitutions directly from the visual interface:

1. Open Safari, navigate to Develop > Show Web Inspector, and select the Elements tab.
2. Select the target text node containing styled typography in the DOM hierarchy.
3. In the right-hand inspection sidebar, click on the Font icon located in the inspector navigation bar.
4. Scroll down to the OpenType Features and Variant Alternates sections.
5. Safari Web Inspector lists all available stylistic sets extracted directly from the underlying font file tables. Active stylistic sets are visually toggled on with blue highlight indicators.
6. Toggle individual stylistic sets in the inspector panel to preview live visual transformations immediately without altering source code.

Diagnosing Typography Cascade and Fallback Issues

When working with stylistic sets across complex projects, typography styling can fail quietly if the active font face lacks corresponding OpenType lookup tables. Keep the following diagnostic steps in mind:

• Family matching precision: The family name declared in @font-feature-values must match the active computed font-family string precisely. Any discrepancy causes the browser to ignore semantic mappings.
• System font limitations: System fallback stacks (such as -apple-system) do not expose custom stylistic sets defined for external web fonts.
• Font subsetting conflicts: Aggressive font subsetting tools often strip optional OpenType layout tables (GSUB/GPOS) to save bandwidth. Always confirm that your web font package retains stylistic set tables during compression.