How to Inspect CSS font-feature-settings Subscript (subs) and Superscript (sups) in Safari Web Inspector

Setting chemical formulas (such as H₂O or CO₂), mathematical powers, footnote references, and ordinal numbers (such as 1ˢᵗ or 2ⁿᵈ) is a common requirement in scientific and editorial publishing. Traditionally, web authors rely on standard HTML <sub> and <sup> tags. By default, browsers render these tags by mechanically scaling down the font size by approximately 75% and applying a vertical offset via vertical-align: sub or super. However, this mechanical scaling shrinks the stroke weight of the glyphs, resulting in spindly, faint numbers that clash with the surrounding body copy and disrupt line-height spacing.

In high-grade OpenType typefaces, type designers craft dedicated subscript (subs) and superscript (sups) glyphs. These genuine glyphs are drawn with optically corrected stroke weights and proportional widths that harmonize perfectly with standard text. Using CSS properties like font-variant-position and font-feature-settings, developers can activate authentic glyphs. Inspecting these settings inside Safari Web Inspector ensures clean typographic rendering across macOS and iOS.

The Typographic Flaw of Mechanical Subscripts

When an HTML <sup> tag scales standard numbers down, the line stems become visibly thinner than the adjacent full-size text. Furthermore, the vertical shift frequently forces the browser to expand line boxes, causing inconsistent paragraph line spacing. True OpenType superscripts solve both problems: they fit naturally within the standard font line-box height while preserving full optical weight.

/* Standard high-level CSS specification */
.scientific-formula sup {
    font-variant-position: super;
    vertical-align: baseline;
    font-size: inherit;
}

.scientific-formula sub {
    font-variant-position: sub;
    vertical-align: baseline;
    font-size: inherit;
}

/* Fallback OpenType tag syntax */
.scientific-formula sup {
    font-feature-settings: "sups" 1;
}

.scientific-formula sub {
    font-feature-settings: "subs" 1;
}

Inspecting Subscript and Superscript in Safari Web Inspector

Safari’s developer suite includes dedicated OpenType feature inspection tools:

1. Open Safari on macOS and load your scientific or mathematical webpage.
2. Right-click the superscript footnote or subscript number and choose Inspect Element.
3. In the inspection panel on the right, select the Fonts tab.
4. Scroll to the Feature Settings > Positional Forms section.
5. Check whether sups (Superscript) or subs (Subscript) is actively resolved. If the active typeface includes authentic OpenType tables, Safari maps the character directly without artificial font scaling.
6. In the Styles panel, verify that vertical-align: baseline and font-size: inherit prevent unwanted line-height distortions.

Authoring Clean Scientific Typography Stylesheets

To implement authentic OpenType sub/superscripts while retaining fallbacks for fonts that lack OpenType tables:

/* OpenType Positional Styling with Graceful Fallbacks */
@supports (font-variant-position: super) {
    sub, sup {
        font-size: inherit;
        line-height: inherit;
        vertical-align: baseline;
    }
    sub {
        font-variant-position: sub;
        font-feature-settings: "subs" 1;
    }
    sup {
        font-variant-position: super;
        font-feature-settings: "sups" 1;
    }
}

/* Fallback styling when OpenType tables are unavailable */
@supports not (font-variant-position: super) {
    sub, sup {
        font-size: 75%;
        line-height: 0;
        position: relative;
        vertical-align: baseline;
    }
    sup { top: -0.5em; }
    sub { bottom: -0.25em; }
}

Auditing on iOS via Remote Web Inspector

To confirm that mathematical formulas and footnotes display cleanly on mobile devices:

1. Enable Web Inspector in Settings > Safari > Advanced on your iOS device.
2. Connect the device to your Mac via USB and inspect the tab under Safari’s Develop menu.
3. Verify that OpenType subscript and superscript numbers maintain crisp optical legibility on high-density Retina screens without expanding paragraph line spacing.

Enforcing authentic OpenType subscripts and superscripts produces balanced, professional scientific typography across all Apple platforms.