How to Inspect CSS font-feature-settings Capital Spacing (cpsp) in Safari Web Inspector

Setting typography in all-caps (uppercase) requires careful attention to character spacing. In classical typography, capital letters are designed to be set alongside lowercase letters, where optical balance is preserved by contrasting ascenders, descenders, and x-heights. When multiple capital letters sit side by side without lowercase characters, they appear visually crowded and illegible unless additional inter-character spacing is applied. While web developers often resort to coarse CSS letter-spacing rules, manual tracking applies uniform mechanical spacing indiscriminately across all glyphs.

High-grade OpenType typefaces solve this with the Capital Spacing feature tag (cpsp). Designed specifically by type artists, cpsp adds optically weighted, character-specific whitespace around uppercase glyphs while preserving kerning relationships. Using CSS and Safari Web Inspector, web designers can audit and enforce authentic capital spacing across macOS and iOS platforms.

Capital Spacing (cpsp) vs Mechanical letter-spacing

The difference between manual CSS tracking and OpenType capital spacing is substantial:

• Mechanical letter-spacing: Blindly injects an arbitrary fixed pixel or em value between every letter, often breaking custom kerning pairs (such as “TO” or “AV”).
• OpenType cpsp: Dynamically adjusts character sidebearings according to designer-crafted rules, expanding the breathing room of broad letters while keeping narrow characters balanced.

/* Activate designer-crafted OpenType capital spacing */
.all-caps-header {
    text-transform: uppercase;
    font-feature-settings: "cpsp" 1;
}

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

Inspecting Capital Spacing in Safari Web Inspector

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

1. Open Safari on macOS and navigate to your page containing uppercase titles.
2. Right-click the text and select Inspect Element.
3. In the inspection panel on the right, switch to the Fonts tab.
4. Scroll to the Feature Settings subsection. Safari lists all available OpenType features embedded in the font.
5. Verify that cpsp (Capital Spacing) is listed and marked as enabled.
6. In the Styles panel, toggle font-feature-settings: "cpsp" 1; on and off to observe the optical expansion of the letterforms in the viewport.

Authoring Clean Typography Stylesheets

To combine OpenType capital spacing with subtle tracking fallbacks:

/* Refined Uppercase Navigation and Button Typography */
nav.primary-menu a,
button.btn-uppercase,
.eyebrow-heading {
    text-transform: uppercase;
    font-family: "Proxima Nova", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-feature-settings: "cpsp" 1, "case" 1;
    letter-spacing: 0.02em; /* Subtle fallback tracking */
}

/* Ensure monospace code blocks are excluded */
code, kbd, samp {
    text-transform: none;
    font-feature-settings: "cpsp" 0;
    letter-spacing: normal;
}

Testing on iOS Devices via Remote Debugging

To audit headline legibility 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 capital spacing prevents visual congestion on high-resolution Retina screens.

Using cpsp produces refined, optically balanced uppercase typography across all Apple platforms.