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

Professional editorial layout requires proper typographical handling of ordinal indicators, such as 1st, 2nd, or 1ère. OpenType fonts frequently include dedicated glyph variants under the ordn (Ordinals) feature tag to automatically raise and scale letters following numerals. Apple Safari provides native tooling inside Safari Web Inspector to inspect and audit ordinal glyph replacement on macOS and iOS.

Typographical Role of OpenType Ordinals

Rather than using non-standard HTML <sup> elements that distort baseline rhythm and vertical line height, the OpenType ordn feature swaps standard characters with specifically proportioned superscript glyphs that maintain consistent stroke weight with the parent font.

Configuring Ordinals in CSS

Implement the feature using standard CSS font properties:

.ordinal-text {
  font-family: "Georgia", -apple-system, serif;
  font-feature-settings: "ordn" 1;
  font-variant-numeric: ordinal;
}

Inspecting Ordinals in Safari Web Inspector

1. Open your webpage in Safari.
2. Right-click the target ordinal text and select Inspect Element.
3. Navigate to the Font tab in the right-hand panel of Web Inspector.
4. Under the Features disclosure list, locate Ordinals (ordn).
5. Toggle the feature switch on and off to observe live glyph substitutions rendered by Apple’s CoreText layout engine.

Ensuring Cross-Language Compatibility

Verify that your font’s ordn definitions support multi-language conventions, particularly Romance language masculine and feminine ordinals (e.g. 1º, 1ª), ensuring accessible and authentic international typography across your website.