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

Display and editorial headlines require specialized capitalization treatments that elevate visual impact while preserving typographic balance. Standard uppercase glyphs are typically drawn with heavy weights and wide proportions designed to stand alongside lowercase characters. When an entire headline is typeset in all-caps, standard glyphs can appear excessively dense and overpowering. OpenType fonts frequently include dedicated “Titling Capitals” (titl)—glyphs specifically refined with lighter stroke weights and tighter proportions for monumental headings. Furthermore, “Unicase” settings blend uppercase and lowercase glyphs into a unified height. Modern WebKit in Safari supports high-level font-variant-caps properties to govern these styles. This guide explains how to inspect and audit them in Safari Web Inspector.

Understanding Capitalization Variants in OpenType

The CSS font-variant-caps property exposes several OpenType capitalization features:

• titling-caps (OpenType titl): Substitutes specialized titling glyphs designed specifically for large all-capital headlines.
• unicase (OpenType unic): Formats text into a hybrid unicase alphabet where uppercase and lowercase characters share a uniform x-height.
• all-small-caps (OpenType c2sc + smcp): Converts both lowercase and uppercase letters into small capital letterforms.
• petite-caps (OpenType pcap): Formats characters into petite caps matching the exact x-height of lowercase glyphs.

Configuring Editorial Headline Typography in CSS

Apply titling capitals and unicase styling across mastheads and luxury display components:

/* Luxury editorial masthead using true OpenType titling capitals */
h1.masthead-title {
  font-family: "Adobe Caslon Pro", "Didot", serif;
  font-variant-caps: titling-caps;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 3.5rem;
  line-height: 1.15;
}

/* Modern avant-garde branding using unicase */
.brand-wordmark {
  font-family: "Futura", sans-serif;
  font-variant-caps: unicase;
  font-size: 1.75rem;
  font-weight: 600;
}

/* Fallback for legacy user agents */
@supports not (font-variant-caps: titling-caps) {
  h1.masthead-title {
    font-feature-settings: "titl" 1;
  }
}

Inspecting Capitalization Features in Safari Web Inspector

1. Launch Safari on macOS and open your typography page.
2. Right-click the masthead heading and choose Inspect Element.
3. In Web Inspector, open the Elements panel and locate the Computed pane in the right sidebar.
4. Filter by caps and verify that font-variant-caps resolves to titling-caps.
5. Scroll down to the Fonts section and expand the OpenType Features drawer.
6. Verify that the active font binary includes the titl (Titling) feature table.

Visual Before-and-After Comparison in Web Inspector

1. In the Styles panel, locate font-variant-caps: titling-caps; and uncheck the rule.
2. Observe the heading in the Safari viewport: characters revert to standard all-caps glyphs, appearing noticeably thicker and heavier.
3. Re-enable the rule: notice how the character stems become thinner, counters open up, and the headline achieves refined monumental proportions without changing the computed font-size.