How to Inspect CSS font-variant-numeric Ordinal Markers in Safari Web Inspector

In editorial prose, event scheduling, and multilingual typography, displaying ordinal indicators—such as 1st, 2nd, 3rd, or Spanish 1ª and 1º—using manual HTML markup (e.g. 1<sup>st</sup>) introduces substantial layout complications. Manual superscript tags distort line-height rhythm, require explicit vertical-align resets, and fragment clean text copying. In modern web standards, the font-variant-numeric: ordinal property provides declarative access to OpenType ordn glyph tables. Apple Safari provides native visual inspection tooling within Safari Web Inspector to inspect and validate ordinal marker substitutions in real time.

The Semantic Advantage of font-variant-numeric: ordinal

Applying font-variant-numeric: ordinal instructs the OpenType layout engine to automatically substitute standard letterforms appearing immediately after numbers with specialized superscript ordinal glyphs designed by the type foundry:

/* Apply ordinal markers across tournament rankings */
.tournament-leaderboard-rank {
  font-family: "SF Pro Text", "Baskerville", serif;
  font-variant-numeric: ordinal;
  font-weight: 600;
}

/* Reset to standard letterforms if needed */
.standard-text-display {
  font-variant-numeric: normal;
}

Because the glyph substitutions happen entirely within the font rendering pipeline, the baseline line-height remains pristine, preventing uneven paragraph leading across running text.

Inspecting Ordinals in Safari Web Inspector

Safari Web Inspector allows web authors to examine active OpenType numeric 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 containing ordinal text (e.g. 1st Place).
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 Ordinal Forms (ordn) feature row.
6. If the active font contains the OpenType ordn table, Safari displays a blue toggle switch. You can toggle the switch to preview live visual transformations on the canvas instantly.

Diagnosing Typography Support Pitfalls

If ordinal markers fail to render when applying ordinal, check the following common causes:

• Font file table availability: The OpenType ordn table is supported in professional typefaces (such as SF Pro, Adobe Caslon, or Garamond Premier), but may be missing from lightweight open-source fonts.
• Language-specific ordinals: Many typefaces distinguish between English ordinals (st, nd, rd, th) and Romance language ordinals (ª, º). Ensure the enclosing HTML element declares appropriate language tags (e.g. lang="en-GB" or lang="es").
• Preserving tables during subsetting: Confirm that web font compressors do not discard the ordn OpenType table when building lightweight WOFF2 bundles.