How to Inspect CSS font-synthesis-small-caps in Safari Web Inspector

True small caps (petite or small capitals) are an indispensable typographic feature designed to integrate acronyms, headers, and lead-in text seamlessly into running copy. In high-quality OpenType fonts, genuine small-cap glyphs are specifically drawn by type designers with adjusted stroke weights, wider proportions, and balanced optical metrics that harmonize with lowercase text height. However, when a stylesheet invokes font-variant: small-caps on a font family that lacks native OpenType small-cap glyph tables (smcp), web browsers generate artificial small caps by mechanically scaling down standard uppercase capital letters.

This synthetic scaling thins the stroke weight of the capital letters, creating an uneven, spindly appearance that disrupts visual hierarchy. Using font-synthesis-small-caps: none;, web designers can prohibit artificial small caps across Safari on macOS and iOS, ensuring only genuine glyphs are displayed.

The Typographic Flaw of Synthetic Small Caps

When a browser performs synthetic small-cap scaling, it shrinks uppercase letters by approximately 70% to 80% to match the font’s x-height. Because line thickness is scaled down proportionally, the resulting letters have noticeably thinner stems than the neighbouring full-size capitals and lowercase characters. On Apple’s high-density Retina displays, this weight mismatch is immediately noticeable.

The W3C CSS Fonts Module Level 4 standardises granular controls to prevent this behaviour:

/* Prohibit synthetic scaling of capital letters */
.typography-scope {
    font-variant-caps: all-small-caps;
    font-synthesis-small-caps: none;
}

When font-synthesis-small-caps: none is specified, Safari tests the loaded font for native OpenType smcp or c2sc features. If unavailable, it renders standard lowercase or uppercase characters rather than distorting letterforms with artificial scaling.

Auditing Small Caps in Safari Web Inspector

Safari Web Inspector provides dedicated typographic inspection tools to confirm whether small caps are rendered from authentic OpenType features or synthetically generated:

1. Open Safari on macOS and navigate to the webpage containing small-cap text.
2. Right-click the small-caps text element and select Inspect Element to open Web Inspector.
3. In the right-hand panel, select the Fonts tab.
4. Inspect the Font Details card. Safari details the active font source and OpenType features.
5. Check the Synthesised property. If Web Inspector displays Small Caps: Synthesised, Safari is actively applying artificial scaling to full-size uppercase glyphs.
6. Switch to the Styles panel, add font-synthesis-small-caps: none;, and verify that Safari halts synthetic distortion.

Configuring Resilient Typography Rules in CSS

To ensure consistent typographic treatment across your design system, configure fallback styles that pair OpenType feature tags with synthesis suppression:

/* Strict Typography Rule for Abbreviations and Acronyms */
abbr, .small-caps {
    font-feature-settings: "smcp" 1, "c2sc" 1;
    font-variant-caps: all-small-caps;
    font-synthesis-small-caps: none;
    letter-spacing: 0.04em;
    text-transform: none;
}

/* Fallback styling when OpenType small-caps are absent */
@supports not (font-variant-caps: all-small-caps) {
    abbr, .small-caps {
        font-size: 0.85em;
        letter-spacing: 0.05em;
    }
}

Testing Font Synthesis on iOS via Remote Debugging

To verify small-caps rendering on mobile Safari:

1. Connect your iPhone or iPad to your Mac via USB.
2. Ensure Web Inspector is enabled in Settings > Safari > Advanced on your iOS device.
3. In desktop Safari, open the Develop menu, select your iOS device, and click the web page.
4. Audit the computed styles and verify that font-synthesis-small-caps: none preserves typographic integrity on mobile screens.

Enforcing font-synthesis-small-caps: none ensures your digital typography adheres to strict professional typesetting standards across all Apple devices.