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

In editorial prose, narrative articles, and body copy, numerical figures should blend harmoniously with surrounding lowercase and uppercase letterforms. While tabular figures (tabular-nums) are vital for data tables where numbers must align in vertical columns, they appear unnaturally wide and awkward in running text—especially the digit “1”. The font-variant-numeric: proportional-nums property provides declarative access to OpenType proportional figure tables (pnum), giving each numeral an organic width proportional to its shape. Apple Safari provides native visual inspection tooling within Safari Web Inspector to inspect and validate proportional figure substitutions in real time.

The Typographic Distinction Between Tabular and Proportional Figures

OpenType fonts typically provide two contrasting width systems for numeric glyphs:

• Tabular Figures (tnum): Every digit (0 through 9) shares the exact same horizontal advance width, functioning like a monospaced font. Essential for financial balance sheets, price lists, and countdown timers.
• Proportional Figures (pnum): Each digit occupies a variable horizontal width tailored to its individual glyph design. The digit “1” is significantly narrower than the digit “8”, creating balanced, visually pleasing typography in sentences and paragraphs.

Configuring Strict Proportional Figures in CSS

To enforce proportional numbers across narrative editorial content:

/* Apply proportional figures to editorial body paragraphs */
.editorial-article-body {
  font-family: "SF Pro Text", "Georgia", serif;
  font-variant-numeric: proportional-nums;
  line-height: 1.7;
}

/* Combine proportional figures with oldstyle numerals */
.historical-novel-excerpt {
  font-family: "EB Garamond", serif;
  font-variant-numeric: proportional-nums oldstyle-nums;
}

This ensures numbers flow naturally within paragraphs, avoiding unsightly typographic gaps around narrow numerals.

Inspecting Proportional 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 numbers.
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 Proportional Figures (pnum) feature row.
6. Observe the active toggle switch. If the active font contains the OpenType pnum table, Safari highlights the feature badge in blue.
7. Toggle between proportional-nums and tabular-nums directly in the inspector panel to observe the immediate change in letter spacing and paragraph text flow.

Best Practices for Mixed Editorial and Table Layouts

To maintain typographic harmony across complex web applications:

• Set proportional figures on the root or article element: Default body text to proportional-nums for optimal reading comfort.
• Selectively apply tabular-nums to data components: Target data grids, statistics tables, and financial balance sheets with font-variant-numeric: tabular-nums.
• Confirm OpenType table availability: Use Web Inspector to ensure custom web fonts include both pnum and tnum layout tables during font subsetting.