How to Inspect CSS font-feature-settings Slashed Zero (zero) in Safari Web Inspector

In financial reports, data tables, programming code blocks, and serial number displays, distinguishing the digit zero (0) from the capital letter “O” is essential to prevent user input errors and transcription mistakes. Standard typography often uses an open, unadorned oval for the zero digit that looks almost identical to an uppercase “O”. High-quality OpenType typefaces resolve this ambiguity through the Slashed Zero feature tag (zero), which replaces the standard numeral zero with a version containing a diagonal slash through its counter.

Using CSS properties like font-variant-numeric: slashed-zero; or font-feature-settings: "zero" 1;, web designers can enforce clear numeral differentiation. Inspecting these glyph mappings inside Safari Web Inspector ensures accurate rendering across macOS and iOS platforms.

Understanding Slashed Zero Typographic Controls

The CSS Fonts Module provides both high-level and low-level controls for slashed zero rendering:

/* High-level standards-compliant CSS declaration */
.data-table-numbers {
    font-variant-numeric: slashed-zero;
}

/* Equivalent low-level OpenType tag */
.data-table-fallback {
    font-feature-settings: "zero" 1;
}

/* Explicit suppression */
.standard-text {
    font-variant-numeric: normal;
    font-feature-settings: "zero" 0;
}

Inspecting Slashed Zero in Safari Web Inspector

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

1. Open Safari on macOS and navigate to your page containing financial data or serial numbers.
2. Right-click the text 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 zero (Slashed Zero) is listed and marked as enabled.
6. In the Styles panel, toggle font-variant-numeric: slashed-zero; on and off to observe the diagonal slash appear within the digit zero.

Authoring Clean Financial Stylesheets

To combine slashed zero with tabular numbers in financial tables:

/* Financial and Serial Number Typography */
table.financial-data td,
.serial-key,
code, pre {
    font-variant-numeric: slashed-zero tabular-nums;
    font-feature-settings: "zero" 1, "tnum" 1;
}

/* Ensure body paragraphs use default numerals */
p, li {
    font-variant-numeric: normal;
    font-feature-settings: "zero" 0;
}

Testing on iOS Devices via Remote Debugging

To audit digit legibility 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 slashed zero glyphs maintain crisp legibility without clipping on high-resolution Retina screens.

Using zero produces unambiguous, professional numeral typography across all Apple platforms.