How to Inspect CSS font-feature-settings Case-Sensitive Forms (case) in Safari Web Inspector

When styling headings, navigation bars, and call-to-action buttons in uppercase (all-caps), punctuation characters—such as hyphens, dashes, parentheses, brackets, braces, and guillemets—frequently appear vertically misaligned. In standard font design, punctuation glyphs are centered vertically relative to lowercase letters (the x-height). When placed alongside tall uppercase capital letters, punctuation marks appear noticeably dropped toward the baseline, disrupting optical harmony and giving headlines an awkward, unpolished appearance.

Professional OpenType fonts include dedicated case-sensitive punctuation glyphs encoded under the Case-Sensitive Forms feature tag (case). When activated, the font shifts punctuation symbols upward to align with the visual center of capital letters. Using CSS properties and Safari Web Inspector, web designers can audit and enforce case-sensitive alignment across macOS and iOS platforms.

The Typographic Problem of Unaligned Punctuation

Consider an all-caps title like (ANNUAL REPORT: 2026-2027). Under default typesetting, the opening and closing parentheses, colon, and hyphen sit lower than the optical midpoint of the capital letters. The case feature shifts these characters upward so their center matches the cap-height:

/* Standard CSS font-feature-settings declaration */
.all-caps-title {
    text-transform: uppercase;
    font-feature-settings: "case" 1;
    letter-spacing: 0.04em;
}

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

Inspecting Case-Sensitive Forms in Safari Web Inspector

Safari Web Inspector makes it straightforward to audit whether the loaded font supports and resolves the case feature:

1. Open Safari on macOS and navigate to your webpage containing all-caps text with punctuation.
2. Right-click the headline and select Inspect Element.
3. In the inspection panel on the right, click the Fonts tab.
4. Scroll to the Feature Settings subsection. Safari lists all OpenType features available in the loaded font file.
5. Confirm that case (Case-Sensitive Forms) is listed as active.
6. In the Styles panel, toggle font-feature-settings: "case" 1; on and off. Observe the instantaneous vertical shift of parentheses, hyphens, and dashes aligning precisely with the capital letters.

Authoring Clean Typography Stylesheets

To ensure all uppercase copy benefits from case-sensitive alignment without manually styling every element:

/* Global Uppercase Typography Guard */
.uppercase-heading,
[data-typography="all-caps"],
button.primary-action {
    text-transform: uppercase;
    font-feature-settings: "case" 1, "kern" 1;
    letter-spacing: 0.05em;
}

/* Ensure code blocks retain standard punctuation alignment */
pre, code, kbd {
    text-transform: none;
    font-feature-settings: "case" 0;
}

Testing on iOS Devices via Remote Web Inspector

Because subtle vertical shifts are especially prominent on compact mobile displays:

1. Enable Web Inspector under Settings > Safari > Advanced on your iPhone or iPad.
2. Attach the iOS device to your Mac via USB and inspect the page from desktop Safari’s Develop menu.
3. Verify that punctuation marks in banners and navigation menus maintain optical alignment on high-density Retina screens.

Activating case feature forms produces polished, publication-grade typography across all Apple platforms.