How to Inspect CSS font-feature-settings Petite Capitals from Capitals (pcap) in Safari Web Inspector

In classical editorial typography, standard small capitals (smcp) convert lowercase letters into capital forms sized to the font’s x-height. However, when dealing with mixed-case strings or acronyms already entered in uppercase letters, standard small caps leave the uppercase capitals untouched at full cap-height. To convert all letters—including capital characters—into smaller capital forms, type designers provide two specialized OpenType features: All Small Caps (c2sc + smcp) and Petite Capitals from Capitals (pcap).

Petite capitals are sized specifically to match the font’s lowercase x-height exactly (unlike standard small caps, which are slightly taller than the x-height). Using font-variant-caps: petite-caps; or font-feature-settings: "pcap" 1;, web designers can enforce seamless petite capital styling. Inspecting these glyph mappings inside Safari Web Inspector ensures flawless typographic rendering across Apple platforms.

Understanding Small Caps vs Petite Capitals

The distinction between small caps and petite caps lies in vertical proportion:

• Small Capitals (smcp / c2sc): Sized slightly taller than the x-height (typically around 110% to 120% of x-height) to provide subtle contrast against lowercase copy.
• Petite Capitals (pcap): Sized exactly equal to the lowercase x-height, creating a completely flush, level top baseline when mixed with lowercase characters.

/* High-level standards-compliant CSS declaration */
.editorial-acronym {
    font-variant-caps: all-petite-caps;
}

/* Equivalent low-level OpenType tag */
.editorial-acronym-fallback {
    font-feature-settings: "pcap" 1;
}

/* Normal fallback */
.standard-text {
    font-variant-caps: normal;
    font-feature-settings: "pcap" 0;
}

Inspecting Petite Capitals in Safari Web Inspector

Safari Web Inspector provides dedicated OpenType feature verification tools:

1. Open Safari on macOS and load your editorial typography page.
2. Right-click the acronym or styled heading and select Inspect Element.
3. In the right-hand inspection panel, click the Fonts tab.
4. Scroll to the Feature Settings > Capitals section. Safari details all OpenType capital features supported by the loaded typeface.
5. Check whether pcap (Petite Capitals from Capitals) is listed and marked as enabled.
6. In the Styles panel, toggle font-variant-caps: all-petite-caps; on and off to verify that uppercase characters scale down cleanly to exact x-height proportions without stroke weight thinning.

Authoring Clean Editorial Stylesheets

To implement petite capitals across bibliographic references and publication citations:

/* Archival Citation Typography */
cite.citation-label,
.catalog-identifier {
    font-family: "Alegreya", "Baskerville", Georgia, serif;
    font-variant-caps: all-petite-caps;
    font-feature-settings: "pcap" 1;
    letter-spacing: 0.03em;
}

/* Fallback for fonts without petite cap glyph tables */
@supports not (font-variant-caps: all-petite-caps) {
    cite.citation-label {
        font-variant-caps: all-small-caps;
        font-feature-settings: "c2sc" 1, "smcp" 1;
    }
}

Validating on iOS Devices via Remote Web Inspector

To verify that petite capitals render crisply on mobile devices:

1. Enable Web Inspector in Settings > Safari > Advanced on your iPhone or iPad.
2. Connect the device to your Mac via USB and inspect the page from desktop Safari’s Develop menu.
3. Confirm that petite capital letterforms maintain balanced stroke weights and legible counters on mobile Retina screens.

Enforcing authentic petite capitals ensures sophisticated, publication-grade typography across all Apple platforms.