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

Small capitals (small caps) are upper-case letterforms designed at the exact x-height and optical weight of lowercase characters. When employed for acronyms, abbreviations (such as NASA, NATO, or GMT), introductory lead-ins, and table headers, true small caps blend harmoniously into body text without creating visually jarring capital letter blocks. However, when authors use older legacy CSS properties (such as font-variant: small-caps) on typefaces that lack true small-cap glyphs, browsers synthesize fake small caps by mathematically downscaling uppercase letters. The result is thin, spindly, unweighted strokes that violate typographic harmony. The modern font-variant-caps CSS property grants fine-grained access to dedicated OpenType capital variants. Using Safari Web Inspector on macOS and iOS, developers can live-inspect capital glyph variants and debug OpenType table cascades.

Understanding font-variant-caps OpenType Values

The font-variant-caps property maps to distinct OpenType layout feature tags embedded inside professional digital typefaces:

• small-caps (smcp): Replaces lowercase letters with true small capitals while leaving existing uppercase characters at full height. Ideal for acronyms and mixed-case styling.
• all-small-caps (c2sc + smcp): Converts both uppercase and lowercase characters into uniform small capitals. Perfect for elegant section subheadings, metadata timestamps, and card labels.
• petite-caps (pcap): Renders lowercase letters as petite capitals designed to match the lower x-height exactly, even smaller than standard small caps.
• all-petite-caps (c2pc + pcap): Transforms all letters into petite caps.
• unicase (unic): Synthesizes a hybrid alphabet combining uppercase and lowercase glyph forms into a single visual height.
• titling-caps (titl): Activates specially weighted display capitals designed specifically for very large headline sizes, preventing strokes from appearing excessively heavy when scaled up.

Configuring font-variant-caps in Stylesheets

Apply font-variant-caps with proper fallback handling to maintain visual sophistication across editorial interfaces:

/* Standard acronym and initialism styling */
abbr, .acronym {
  font-variant-caps: small-caps;
  text-transform: lowercase; /* Ensures lowercase triggers smcp feature */
  letter-spacing: 0.05em;
}

/* Elegant card metadata labels and category tags */
.card-category-label {
  font-family: "Georgia", "Iowan Old Style", "Times New Roman", serif;
  font-variant-caps: all-small-caps;
  letter-spacing: 0.08em;
  font-weight: 600;
}

/* Large display hero titles with delicate titling capitals */
.hero-editorial-title {
  font-family: "Baskerville", "Palatino", serif;
  font-size: 3.5rem;
  font-variant-caps: titling-caps;
}

Inspecting font-variant-caps via Safari Web Inspector

To audit capital glyph substitutions in Apple Safari:

1. Open Safari and navigate to your target web application. Open developer tools via Develop > Show Web Inspector (or press Cmd + Option + I).
2. Use the element inspection pointer to select an element styled with small caps.
3. Navigate to the Styles panel on the right sidebar and view the Computed tab.
4. Filter the computed properties for font-variant-caps. Verify that the rule evaluates to small-caps or all-small-caps without being superseded by universal CSS reset rules.

/* Inspect computed property in Web Inspector Console */
window.getComputedStyle(document.querySelector('.card-category-label')).fontVariantCaps;
// Returns: "all-small-caps"

Distinguishing True Small Caps from Fake Synthesized Caps

To verify whether Safari is rendering true hand-crafted OpenType small caps or synthetic scaled down capitals:

1. With the target element selected, click the Fonts tab located in the right-hand inspection drawer.
2. Review the Rendered Fonts list. Ensure that the active typeface is a font that includes genuine small cap tables (e.g., Georgia, Adobe Garamond, Hoefler Text, or SF Pro).
3. Look under Font Features > Capitals.
4. Observe the letter strokes: true small caps maintain the identical horizontal stem thickness and serifs as surrounding full-sized lowercase letters. If the letters look noticeably thinner or paler, the font lacks true small cap tables.
5. Pair with font-synthesis-small-caps: none to prevent Safari from falling back to synthetic fake capitals:

/* Enforce true small caps or clean normal text fallback */
.strict-small-caps {
  font-variant-caps: small-caps;
  font-synthesis-small-caps: none;
}

Auditing Letter-Spacing and Alignment

Because small capitals consist entirely of capital forms without ascending or descending stems (such as “b”, “d”, “p”, or “q”), they can appear visually cramped if rendered with standard lowercase letter-spacing. Use Safari Web Inspector to evaluate spacing:

1. In the Styles panel, test adding letter-spacing: 0.04em to 0.08em.
2. Inspect the Layout tab to ensure the tracking adjustment does not trigger unpredicted line wraps on mobile viewports.

By leveraging font-variant-caps and auditing typography through Safari Web Inspector, web designers ensure digital publications showcase true typographic craftsmanship, eliminating unsightly faux small caps across Apple devices.