How to Inspect CSS font-feature-settings Superscript (sups) Ordinals in Safari Web Inspector

In classical editorial typesetting and international language publishing, formatting ordinal indicators—such as 1st, 2nd, 3rd, or Spanish 1.º and French 1ʳᵉ—requires delicate typographical handling. When formatted using unstyled text or mechanical HTML <sup> tags, the ordinal letters (“st”, “nd”, “th”, “o”, “a”) often appear with excessively thin stroke weights or trigger uneven paragraph line heights. Professional OpenType fonts resolve this through the Ordinals feature tag (ordn), which provides designed superscript letterforms optically proportioned to align alongside numerals.

Using CSS properties like font-variant-numeric: ordinal; or font-feature-settings: "ordn" 1;, web designers can enforce clean, authentic ordinal styling. Inspecting these glyph mappings inside Safari Web Inspector ensures accurate rendering across macOS and iOS platforms.

Understanding Mechanical Superscripts vs OpenType Ordinals

The difference between mechanical HTML tags and OpenType ordinals is significant:

• Mechanical <sup> Tags: Shrinks standard letters by ~75% and shifts them upward, creating thin strokes and forcing the browser to expand line bounding boxes.
• OpenType Ordinals (ordn): True designed glyphs crafted to match the optical weight of the font, positioned at cap-height without disrupting baseline line-height.

/* High-level standards-compliant CSS declaration */
.event-date-ordinal {
    font-variant-numeric: ordinal;
}

/* Equivalent low-level OpenType tag */
.event-date-fallback {
    font-feature-settings: "ordn" 1;
}

/* Explicit reset */
.standard-text {
    font-variant-numeric: normal;
    font-feature-settings: "ordn" 0;
}

Inspecting Ordinals in Safari Web Inspector

Safari Web Inspector allows web authors to verify whether the active typeface supports and renders the ordn feature:

1. Open Safari on macOS and navigate to your page containing ordinal numbers.
2. Right-click the ordinal text and select Inspect Element.
3. In the inspection panel on the right, switch to the Fonts tab.
4. Scroll to the Feature Settings > Numeric section. Safari lists all available OpenType numeric features.
5. Verify that ordn (Ordinals) is listed and marked as enabled.
6. In the Styles panel, toggle font-variant-numeric: ordinal; on and off to observe the letters transform into designed superscript ordinals.

Authoring Clean Editorial Stylesheets

To apply ordinals cleanly to dates, calendar listings, and rankings:

/* Calendar and Ranking Typography */
time.published-date .ordinal-suffix,
.leaderboard-rank .ordinal-suffix {
    font-family: "Garamond Premier Pro", "Baskerville", Georgia, serif;
    font-variant-numeric: ordinal;
    font-feature-settings: "ordn" 1;
}

/* Ensure standard body copy remains unaffected */
body, p {
    font-variant-numeric: normal;
}

Testing on iOS Devices via Remote Debugging

To audit ordinal legibility on mobile Apple 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 ordinal letterforms maintain balanced stroke weights and crisp legibility on mobile Retina screens without disrupting line spacing.

Using ordn produces refined, publication-grade ordinal typography across all Apple platforms.