How to Inspect CSS font-variant-caps Titling-Caps in Safari Web Inspector

Display headlines, mastheads, and poster titles typeset in large font sizes often look overly heavy and dense when using standard body-text capital letters. Foundries historically cut specialized titling capitals—letterforms proportioned with narrower optical proportions, thinner delicate serifs, and lighter strokes optimized specifically for large display usage. In modern CSS Fonts Module Level 4, the font-variant-caps: titling-caps property provides declarative access to OpenType titl glyph substitution tables. Apple Safari provides native visual inspection tooling within Safari Web Inspector to inspect and validate titling-caps substitutions in real time.

The Typographic Function of Titling Capitals

Standard capital letters are designed to maintain legibility at small sizes (8pt to 12pt). Consequently, their stem weights are robust and their internal counters are open. When magnified to headline sizes (36pt to 72pt), standard capitals can appear clumsy, over-inked, and crowded.

Applying font-variant-caps: titling-caps instructs the OpenType engine to substitute standard capitals with specialized titling glyphs cut with delicate proportions tailored specifically for display headlines:

/* Apply titling caps to main editorial headlines */
.editorial-lead-masthead {
  font-family: "Didot", "Bodoni MT", serif;
  font-size: 3.5rem;
  font-variant-caps: titling-caps;
  letter-spacing: 0.02em;
  line-height: 1.1;
}

/* Reset to standard caps for body content */
.standard-body-text {
  font-variant-caps: normal;
}

Inspecting Titling-Caps in Safari Web Inspector

Safari Web Inspector allows web authors to verify active OpenType capitalization tables directly from the visual browser interface:

1. Launch Safari and navigate to Develop > Show Web Inspector (Cmd+Option+I on macOS).
2. Select the Elements panel and click on a large headline element.
3. In the right-hand details pane, click the Font icon in the inspector toolbar.
4. Scroll down to the Font Variant and OpenType Features sections.
5. Locate the Titling Capitals (titl) feature row.
6. If the active font contains genuine OpenType titling glyph tables, Safari displays a blue status indicator. You can toggle switches directly to preview visual transformations in real time.

Diagnosing Typography Support Pitfalls

If titling capitals fail to display or fall back to standard text, consider these troubleshooting steps:

• Font file table availability: The OpenType titl table is present primarily in classical display serifs (such as Adobe Garamond Premier, Didot, and Perpetua). Standard sans-serif body fonts generally lack titling tables.
• Preserving tables during subsetting: Confirm that web font compressors do not discard the titl OpenType table when building lightweight WOFF2 bundles.
• Graceful degradation: If a font lacks titling tables, the browser renders standard capital letters cleanly without synthetic distortion.