How to Inspect and Control CSS font-variant-position in Safari Web Inspector

Typesetting mathematical formulas, chemical compounds (such as H₂O or CO₂), footnote references, and ordinal numbers (such as 1st or 2nd) demands precise typographic handling of superscripts and subscripts. Historically, browsers simulated superscripts and subscripts for HTML <sup> and <sub> tags by reducing font size by approximately 25% and shifting the baseline using vertical-align: super or sub. This faux approach creates severe aesthetic flaws: reduced glyphs exhibit unnaturally thin stroke weights that clash with surrounding body text, and altered line heights distort vertical rhythm. The font-variant-position CSS property provides access to true, hand-crafted OpenType superscript and subscript glyphs embedded inside professional typefaces. Using Safari Web Inspector on macOS and iOS, developers can live-inspect glyph substitution tables and verify fallback cascades.

Understanding True OpenType Position Glyphs vs Synthetic Scaling

Professional OpenType typefaces (including Georgia, Adobe Caslon, Garamond Premier, and SF Pro) include dedicated character sets specifically drawn for sub- and super-positioning:

• True Superscript (OpenType sups): Features optical weight compensation matching surrounding lowercase and uppercase glyphs, preventing hairline strokes from disappearing on high-DPI displays. Positioned precisely aligned with font cap heights without altering paragraph line-box metrics.
• True Subscript (OpenType subs): Accurately drawn glyphs that sit neatly below the baseline without expanding container line heights.
• Synthetic Fallback (vertical-align): Scaled down regular glyphs whose thin stems look faint and spindly next to unscaled text, often forcing browsers to add awkward vertical line-gap padding.

Configuring font-variant-position in Stylesheets

Modern CSS allows web authors to declare font-variant-position across typographic elements while preserving structural semantic HTML:

/* Global reset for semantic sup and sub tags */
sup, sub {
  font-size: inherit;
  line-height: inherit;
  vertical-align: baseline;
}

/* Enable true OpenType superscript glyphs */
sup {
  font-variant-position: super;
}

/* Enable true OpenType subscript glyphs */
sub {
  font-variant-position: sub;
}

/* Disable typographic positioning (revert to normal baseline glyphs) */
.plain-text-marker {
  font-variant-position: normal;
}

Inspecting font-variant-position via Safari Web Inspector

To inspect whether Safari is rendering true OpenType position glyphs or synthetic fallbacks:

1. Launch Safari, load your document, and open developer tools via Develop > Show Web Inspector (or press Cmd + Option + I).
2. Use the element inspection arrow to highlight a superscript footnote or chemical subscript tag.
3. Navigate to the Styles panel on the right sidebar and select the Computed tab.
4. Filter the computed rules for font-variant-position. Confirm that the calculated value evaluates to super or sub.

/* Web Inspector Console verification */
window.getComputedStyle(document.querySelector('sup')).fontVariantPosition;
// Returns: "super"

Auditing Glyph Substitution in the Fonts Panel

Not all digital fonts contain the OpenType sups and subs feature tables. Safari Web Inspector allows developers to verify whether the active font supports these glyphs or falls back to standard rendering:

1. With the target <sup> element selected, click the Fonts tab in the right-hand inspection drawer.
2. Review the Rendered Fonts list. Ensure the active font family is a typeface equipped with OpenType typographic features.
3. Under Font Features, locate the Position category.
4. Toggle between super, sub, and normal. Observe the rendered canvas: if the font lacks true glyphs, Safari maintains the default glyph geometry rather than faking scaled characters.

Building Resilient Progressive Fallback Stacks

To guarantee that users viewing your site on older browsers or with typefaces lacking OpenType tables still see readable superscripts, implement a progressive enhancement pattern using @supports:

/* Default fallback: traditional vertical-align styling */
sup {
  font-size: 0.75em;
  line-height: 0;
  vertical-align: super;
}

sub {
  font-size: 0.75em;
  line-height: 0;
  vertical-align: sub;
}

/* Modern enhancement: true OpenType position glyphs */
@supports (font-variant-position: super) {
  sup, sub {
    font-size: inherit;
    line-height: inherit;
    vertical-align: baseline;
  }
  sup {
    font-variant-position: super;
  }
  sub {
    font-variant-position: sub;
  }
}

Verifying Vertical Rhythm and Line-Box Integrity

One of the primary benefits of font-variant-position: super is that it eliminates line-box expansion. When using traditional vertical-align: super, lines containing superscripts often push adjacent lines of text apart, breaking paragraph rhythm. In Safari Web Inspector:

1. Select the containing paragraph element in the Elements tree.
2. Enable Show Layout Overlays to visualize line-box margins and baselines.
3. Notice that under font-variant-position: super, every line of text maintains identical line spacing, ensuring strict typographic alignment across dense multi-column layouts.

Leveraging font-variant-position and auditing rendering through Safari Web Inspector elevates online typography, ensuring footnotes, formulas, and ordinal marks render with authentic editorial craftsmanship.