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

In high-end editorial publications, legal briefs, and academic journals, acronyms, table headers, and introductory runs frequently appear in small capitals. However, applying standard font-variant: small-caps only transforms lowercase letters into small capitals, leaving uppercase letters at their full cap height and creating an uneven visual rhythm. The font-variant-caps: all-small-caps property provides declarative access to both OpenType smcp (small capitals from lowercase) and c2sc (small capitals from capitals) tables, converting all letterforms into a harmonious, uniform small-cap display. Apple Safari provides native visual inspection tooling within Safari Web Inspector to inspect and validate all-small-caps substitutions in real time.

Distinction Between small-caps and all-small-caps

OpenType typography handles capitalization transformations using two distinct lookup tables:

• small-caps: Triggers OpenType smcp. Lowercase characters (‘a’-‘z’) are replaced with small-cap glyphs, while capital letters (‘A’-‘Z’) remain full-sized capitals.
• all-small-caps: Triggers both OpenType smcp and c2sc simultaneously. Both lowercase and uppercase characters are substituted with genuine small-cap glyphs designed with optically matched stem weights.

Using genuine small caps prevents the browser from generating “faux” small caps (synthetically scaling down full capitals), which results in spindly, unweighted strokes that look jarring alongside normal text.

Configuring Strict All-Small-Caps in CSS

To style acronyms, subheadings, or legal headers with genuine uniform small capitals:

/* Enforce uniform small caps across subheadings */
.editorial-section-subheading {
  font-family: "EB Garamond", "Baskerville", serif;
  font-variant-caps: all-small-caps;
  letter-spacing: 0.08em;
  font-weight: 500;
}

/* Reset to normal capitalization */
.standard-body-paragraph {
  font-variant-caps: normal;
}

Adding a slight letter-spacing (0.05em to 0.08em) enhances the optical readability of small-cap typography across editorial headings.

Inspecting All-Small-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 an element styled with small capitals.
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 Small Capitals (smcp) and Capitals to Small Capitals (c2sc) feature rows.
6. If the active font contains genuine OpenType small-cap glyphs, Safari displays blue status indicators. You can toggle switches directly to preview visual transformations in real time.

Diagnosing Typography Support Pitfalls

If small capitals look thin or distorted when applying all-small-caps, consider these troubleshooting steps:

• Faux small caps detection: If the active font lacks c2sc and smcp tables, the browser falls back to synthetic scaling. Verify in Web Inspector whether true OpenType tables are active.
• Font subsetting conflicts: Web font generators often exclude c2sc tables to save bandwidth. Ensure both smcp and c2sc tables are retained during WOFF2 compression.