How to Inspect CSS font-feature-settings Swashes (swsh) in Safari Web Inspector

In classical book design, editorial publishing, and luxury branding, initial capitals and heading characters often feature swashes—ornate, flowing decorative extensions that replace standard glyph strokes. Unlike contextual swashes (cswh), which are applied conditionally based on adjacent characters, standard swashes (OpenType feature tag swsh) explicitly replace nominated characters with calligraphic alternates. When styling drop caps, chapter titles, or brand wordmarks, swashes provide immediate artistic distinction.

Using CSS properties like font-variant-alternates: swash(...) or font-feature-settings: "swsh" 1;, web designers can enforce swash typography. Inspecting these glyph mappings inside Safari Web Inspector ensures accurate rendering across macOS and iOS platforms.

Understanding Standard Swash Typography

Swash letterforms are crafted to provide artistic flair on select characters:

/* High-level standards-compliant CSS declaration */
@font-feature-values "Baskerville" {
    @swash {
        ornate: 1;
    }
}

.chapter-title::first-letter {
    font-variant-alternates: swash(ornate);
}

/* Equivalent low-level OpenType tag */
.chapter-title-fallback::first-letter {
    font-feature-settings: "swsh" 1;
}

/* Explicit reset */
.body-copy {
    font-feature-settings: "swsh" 0;
}

Inspecting Swashes in Safari Web Inspector

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

1. Open Safari on macOS and navigate to your page containing swash typography.
2. Right-click the stylized initial capital and select Inspect Element.
3. In the inspection panel on the right, switch to the Fonts tab.
4. Scroll to the Feature Settings > Alternates section. Safari lists all available OpenType alternate features.
5. Verify that swsh (Swash) is listed and marked as enabled.
6. In the Styles panel, toggle font-feature-settings: "swsh" 1; on and off to observe standard characters transform into calligraphic swashes.

Authoring Clean Drop Cap Stylesheets

To combine swash initial letters with balanced margins:

/* Editorial Drop Cap with Swash */
p.article-intro::first-letter {
    font-family: "Garamond", Georgia, serif;
    font-size: 3.5rem;
    float: left;
    line-height: 0.8;
    margin-right: 0.15em;
    font-feature-settings: "swsh" 1;
}

/* Ensure subsequent letters retain normal forms */
p.article-intro {
    font-feature-settings: "swsh" 0;
}

Testing on iOS Devices via Remote Debugging

To audit swash typography 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 swash glyph tails do not clip against paragraph margins on mobile Retina screens.

Using swsh produces refined, publication-grade display typography across all Apple platforms.