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

While standard small capitals (small-caps) are proportioned slightly taller than lowercase x-height to stand out visually, certain specialized type designs and classical book layouts require petite capitals (petite-caps). Petite capitals are specifically designed so their height matches the exact x-height of lowercase glyphs. The font-variant-caps: petite-caps property provides declarative access to OpenType pcap glyph tables, ensuring harmonious integration within running body prose. Apple Safari provides native visual inspection tooling within Safari Web Inspector to inspect and validate petite-caps substitutions in real time.

Typographic Difference Between Small Caps and Petite Caps

In classical European type design:

• Small Caps (smcp): Scaled approximately halfway between lowercase x-height and capital cap-height. Ideal for headings, acronyms, and isolated display phrases.
• Petite Caps (pcap): Exactly aligned with the lowercase x-height baseline and topline. Ideal for running paragraphs where uppercase acronyms must never disrupt horizontal line texture.

When an author applies font-variant-caps: petite-caps, lowercase letters are substituted with petite capital glyphs, while capital letters remain at standard cap-height. Applying all-petite-caps transforms both lowercase and uppercase characters into uniform petite capitals.

Configuring Strict Petite-Caps in CSS

To style acronyms and editorial markers with genuine petite capitals:

/* Apply petite caps to inline technical abbreviations */
.inline-acronym-term {
  font-family: "Alegreya", "EB Garamond", serif;
  font-variant-caps: petite-caps;
  letter-spacing: 0.04em;
}

/* Enforce uniform petite caps across chapter metadata */
.chapter-metadata-header {
  font-family: "Alegreya", serif;
  font-variant-caps: all-petite-caps;
  letter-spacing: 0.06em;
}

Inspecting Petite-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 petite 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 Petite Capitals (pcap) and Capitals to Petite Capitals (c2pc) feature rows.
6. If the active font contains genuine OpenType petite-cap glyphs, Safari displays blue status indicators. You can toggle switches directly to preview visual transformations in real time.

Diagnosing Typography Support Pitfalls

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

• Font file table availability: The OpenType pcap table is rare, found primarily in comprehensive classical serif foundries. If a font lacks pcap, the browser renders standard lowercase characters cleanly without synthetic distortion.
• Preserving tables during subsetting: Confirm that web font compressors (such as glyphhanger or fontmin) do not discard the pcap OpenType table when building lightweight WOFF2 bundles.