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

In luxury branding, wedding stationery design, and fine editorial typography, decorative calligraphic flourishes—known as “swashes”—transform ordinary capital letters and terminal glyphs into elaborate typographic statements. In early desktop publishing, accessing swash characters required hunting through glyph palettes and manually inserting individual Unicode characters. The CSS Fonts Module Level 4 introduces font-variant-alternates and the @font-feature-values at-rule, allowing web developers to activate swash glyphs programmatically in stylesheet rules. Safari Web Inspector includes advanced typography tools to inspect OpenType swashes live. This guide covers configuring and auditing swash alternates in Safari.

Understanding OpenType Swash Features

OpenType fonts categorize flourish substitutions into distinct feature tables:

• swash(<feature-value-name>) (OpenType swsh): Replaces standard letterforms with decorative swash variants.
• contextual-swash(<feature-value-name>) (OpenType cswh): Activates swashes only when surrounding character combinations provide sufficient whitespace to prevent glyph collisions.
• ornaments(<feature-value-name>) (OpenType ornm): Replaces standard glyphs with floral dingbats, vignettes, and border ornaments.
• stylistic(<feature-value-name>) (OpenType salt): Activates individual stylistic alternate glyph cuts.

Configuring @font-feature-values and Swash Styles in CSS

Define custom feature identifiers and apply them across editorial headings:

/* 1. Map OpenType feature index to human-readable names */
@font-feature-values "Bickham Script Pro" {
  @swash {
    flourish: 1;
    delicate: 2;
  }
  @ornaments {
    fleuron: 1;
  }
}

/* 2. Apply swash styling to opening initials and luxury titles */
.invitation-header {
  font-family: "Bickham Script Pro", cursive;
  font-size: 3rem;
  line-height: 1.4;
  
  /* High-level CSS Fonts Module Level 4 declaration */
  font-variant-alternates: swash(flourish);
}

/* Fallback for legacy user agents using raw feature settings */
@supports not (font-variant-alternates: swash(flourish)) {
  .invitation-header {
    font-feature-settings: "swsh" 1;
  }
}

Inspecting Swash Features in Safari Web Inspector

1. Launch Safari on macOS and navigate to your typographic editorial page.
2. Right-click the flourished heading and select Inspect Element.
3. In Web Inspector, open the Elements tab and locate the Computed pane in the right sidebar.
4. Filter by alternates and confirm that font-variant-alternates resolves to swash(flourish).
5. Scroll down to the Fonts section and expand the OpenType Features drawer.
6. Safari Web Inspector highlights the active swsh (Swash) feature table, verifying that the physical font file contains the corresponding alternate glyphs.

Testing Alternate Flourishes Live

1. In the Styles panel, double-click the font-variant-alternates value.
2. Change the value to normal to observe standard calligraphic forms.
3. Change the value to swash(delicate): notice how ascenders on letters like “d”, “h”, and “l” extend into graceful secondary curves without causing layout shifts in downstream elements.