How to Inspect CSS font-feature-settings Lining Figures (lnum) in Safari Web Inspector

In classical typography, many serif and editorial typefaces default to oldstyle figures (also known as lowercase numerals). Oldstyle numbers feature varying heights, ascenders (such as 6 and 8), and descenders (such as 3, 4, 5, 7, and 9) designed to blend into lowercase body text. However, when numbers appear inside all-caps headings, price displays, phone numbers, or technical specifications, oldstyle figures can look disorganized and awkward. Modern typography relies on Lining Figures (OpenType feature tag lnum), where all digits share a uniform height matching uppercase capital letters.

Using CSS properties like font-variant-numeric: lining-nums; or font-feature-settings: "lnum" 1;, web designers can enforce clean, uniform numeral heights. Inspecting these glyph mappings inside Safari Web Inspector ensures accurate rendering across macOS and iOS platforms.

Understanding Oldstyle vs Lining Figures

The distinction between oldstyle and lining figures affects visual hierarchy:

• Oldstyle Figures (onum): Varying baselines and heights designed to harmonize with lowercase copy without drawing excessive visual attention.
• Lining Figures (lnum): Uniform-height numerals that sit cleanly on the baseline and align with capital letters, ideal for headlines, prices, and forms.

/* High-level standards-compliant CSS declaration */
.headline-numbers {
    font-variant-numeric: lining-nums;
}

/* Equivalent low-level OpenType tag */
.headline-numbers-fallback {
    font-feature-settings: "lnum" 1;
}

/* Explicit oldstyle declaration for literature copy */
.novel-body {
    font-variant-numeric: oldstyle-nums;
    font-feature-settings: "lnum" 0, "onum" 1;
}

Inspecting Lining Figures in Safari Web Inspector

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

1. Open Safari on macOS and navigate to your webpage containing numerals.
2. Right-click the number 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 lnum (Lining Figures) is listed and marked as enabled.
6. In the Styles panel, toggle font-variant-numeric: lining-nums; on and off to observe numerals align to uniform cap-height.

Authoring Clean Editorial Stylesheets

To enforce lining figures across headings and UI elements while preserving oldstyle figures for narrative literature:

/* Heading and UI Numeral Typography */
h1, h2, h3, button, .price-display {
    font-family: "Georgia Pro", "Cormorant Garamond", Georgia, serif;
    font-variant-numeric: lining-nums proportional-nums;
    font-feature-settings: "lnum" 1;
}

/* Body copy literature styling */
article.literary-essay p {
    font-variant-numeric: oldstyle-nums;
    font-feature-settings: "onum" 1;
}

Testing on iOS Devices via Remote Debugging

To audit digit alignment 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 lining figures align cleanly with uppercase text on high-resolution Retina displays.

Using lnum produces polished, consistent numeral typography across all Apple platforms.