How to Inspect CSS font-variant-numeric Oldstyle Figures in Safari Web Inspector

In literary typography, book design, and long-form editorial essays, standard lining figures—which share a uniform uppercase cap height—can look harsh and visually dominant when mixed into running paragraphs of lowercase prose. Oldstyle figures (also referred to as non-lining or lowercase numbers) feature varying ascenders (like 6 and 8) and descenders (like 3, 4, 5, 7, and 9) designed to harmonize with lowercase letterforms. The font-variant-numeric: oldstyle-nums property provides declarative access to OpenType onum tables. Apple Safari provides native visual inspection tooling within Safari Web Inspector to inspect and validate oldstyle figure substitutions in real time.

The Typographic Purpose of Oldstyle Figures

Oldstyle figures have been a staple of classical European typography since the Renaissance. When numerals appear within running sentences (such as “in 1984” or “across 25 chapters”), standard modern lining numerals overpower the surrounding lowercase text because their height matches capital letters.

Applying font-variant-numeric: oldstyle-nums instructs the OpenType rendering engine to substitute standard numerals with graceful oldstyle glyphs, creating a balanced, uniform visual texture throughout narrative paragraphs:

/* Apply oldstyle figures to literary prose */
.literary-essay-body {
  font-family: "EB Garamond", "Baskerville", serif;
  font-variant-numeric: oldstyle-nums;
  line-height: 1.8;
  font-size: 1.125rem;
}

/* Retain standard lining figures for data summaries */
.financial-summary-badge {
  font-variant-numeric: lining-nums tabular-nums;
}

Inspecting Oldstyle Numbers 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 a paragraph containing historical dates or quantities.
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 Oldstyle Figures (onum) feature row.
6. Observe the active toggle switch. If the active font contains the OpenType onum table, Safari highlights the feature badge in blue.
7. Toggle between oldstyle-nums and lining-nums directly in the inspector panel to observe the immediate change in line texture and lowercase harmony.

Best Practices for Editorial Typography Systems

To implement oldstyle figures effectively across digital publications:

• Pair with proportional spacing: Combine oldstyle figures with proportional widths using font-variant-numeric: oldstyle-nums proportional-nums for optimal reading comfort.
• Keep lining figures for tables: Always reserve lining-nums tabular-nums for data tables, mathematical formulas, and spreadsheet grids where vertical digit alignment is mandatory.
• Verify font table retention: Ensure font compression and subsetting tools (such as glyphhanger or subfont) do not strip the OpenType onum table from web font files.