How to Inspect CSS font-synthesis-small-caps and Synthetic Glyphs in Safari Web Inspector

Small capitals (small caps)—uppercase letterforms designed with the x-height and proportions of lowercase letters—are a cornerstone of classical editorial typography, acronym typesetting, and bibliographic formatting. When an author applies font-variant: small-caps to a custom web font that lacks dedicated small capital glyphs, browser rendering engines automatically synthesize “faux small caps” by taking full-sized capital letters and scaling them down mathematically. This results in visibly anaemic stem weights, disproportionate letterforms, and jarring visual contrast. Modern WebKit in Safari supports font-synthesis-small-caps to prohibit synthetic glyph generation. This tutorial covers inspecting small caps in Safari Web Inspector.

The Typographic Difference Between True and Faux Small Caps

True small caps are drawn specifically by typeface designers with stroke widths, serifs, and optical proportions matching the surrounding lowercase characters. When a browser synthesizes small caps without designer glyphs, it scales uppercase glyphs down (typically to 70–80% size). This scaling simultaneously reduces the stroke thickness, making the fake small caps appear noticeably lighter and thinner than neighbouring lowercase and uppercase characters. Setting font-synthesis-small-caps: none forbids algorithmic scaling, ensuring characters either render with true OpenType glyphs or retain standard casing.

Authoring Clean Typographic Rules in CSS

Enforce typographic standards across editorial acronyms and abbreviations:

/* 1. Global policy: forbid synthetic small capitals */
html {
  font-synthesis-small-caps: none;
}

/* 2. Format acronyms using OpenType small caps */
abbr,
.acronym {
  font-family: "GaramondPremrPro", Georgia, serif;
  font-variant-caps: small-caps;
  letter-spacing: 0.05em;
}

/* 3. Explicit OpenType feature fallback */
@supports not (font-variant-caps: small-caps) {
  abbr,
  .acronym {
    font-feature-settings: "smcp" 1;
  }
}

Inspecting Small Caps in Safari Web Inspector

1. Launch Safari on macOS and open your editorial article.
2. Right-click an acronym element (e.g. <abbr>HTML</abbr>) and select Inspect Element.
3. In Web Inspector, open the Elements panel and locate the Styles sidebar.
4. Verify that font-synthesis-small-caps: none is actively applied.
5. Switch to the Computed tab and expand the Fonts section.
6. Inspect the rendered typeface details. Safari indicates whether the OpenType smcp feature table is active or if the glyphs rendered as standard uppercase.

Visual Before-and-After Comparison in Web Inspector

1. In the Styles panel, temporarily uncheck font-synthesis-small-caps: none.
2. Observe the glyphs in the viewport: WebKit algorithmically shrinks the capital letters, causing stem thicknesses to become visibly thinner than adjacent text.
3. Re-enable the rule. Notice how stem weights instantly harmonize with the body copy, restoring typographic equilibrium.