How to Inspect CSS font-feature-settings Proportional Figures (pnum) in Safari Web Inspector

While tabular numerals (tnum) are essential for accounting columns and data grids, body text and narrative journalism require proportional figures (pnum). Proportional numbers vary in width according to character geometry (e.g. ‘1’ is narrower than ‘8’), integrating seamlessly into the surrounding sentence rhythm. Safari Web Inspector provides native typographic inspection tools to preview and audit proportional numerals on macOS.

Typographical Role of Proportional Numerals

When tabular numbers are embedded within flowing paragraphs, the wide whitespace around the numeral ‘1’ creates distracting visual holes in the typographic texture. Proportional figures adjust each digit’s glyph width and sidebearings to match standard letterform spacing.

Configuring Proportional Figures in CSS

Implement proportional figures across editorial containers in your stylesheet:

.editorial-prose {
  font-family: "Charter", "Georgia", -apple-system, serif;
  font-feature-settings: "pnum" 1;
  font-variant-numeric: proportional-nums;
  line-height: 1.6;
}

Inspecting Features in Safari Web Inspector

1. Open the editorial article in Safari.
2. Right-click the paragraph containing numerals and select Inspect Element.
3. Navigate to the Font tab in Web Inspector’s right pane.
4. Locate Proportional Figures (pnum) in the Features section.
5. Toggle the switch to observe live proportional width adjustments rendered by Apple’s CoreText layout engine.

Pairing with Oldstyle Figures

For classic literary typography, pair pnum with onum (Oldstyle Figures) to blend numerals naturally with lowercase ascenders and descenders.