Limited support Use with care and confirm browser support before shipping it to all users.

font-variant-position

The font-variant-position CSS property controls the use of alternate, smaller glyphs that are positioned as superscript or subscript.

The glyphs are positioned relative to the baseline of the font, which remains unchanged. These glyphs are typically used in <sub> and <sup> elements.

When the usage of these alternate glyphs is activated, if one character in the run doesn't have such a typographically-enhanced glyph, the whole set of characters of the run is rendered using a fallback method, synthesizing these glyphs.

These alternate glyphs share the same em-box and the same baseline as the rest of the font. They are merely graphically enhanced, and have no effect on the line-height and other box characteristics.

Typography

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
font-variant-position
117
117
34
9.1
117
9.3
normal
117
117
34
9.1
117
9.3
sub
117
117
34
9.1
117
9.3
super
117
117
34
9.1
117
9.3
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Notes 2 item(s)
Limitation
  • This browser only partially implements this feature
Implementation note
  • If the font does not have subscript glyphs, then substitute characters are not synthesized (see bug 352218916).
Notes 2 item(s)
Limitation
  • This browser only partially implements this feature
Implementation note
  • If the font does not have subscript glyphs, then substitute characters are not synthesized (see bug 352218916).
Notes 2 item(s)
Limitation
  • This browser only partially implements this feature
Implementation note
  • If the font does not have subscript glyphs, then substitute characters are not synthesized (see bug 151471).
Notes 2 item(s)
Limitation
  • This browser only partially implements this feature
Implementation note
  • If the font does not have subscript glyphs, then substitute characters are not synthesized (see bug 352218916).
Notes 2 item(s)
Limitation
  • This browser only partially implements this feature
Implementation note
  • If the font does not have subscript glyphs, then substitute characters are not synthesized (see bug 151471).
Notes 2 item(s)
Limitation
  • This browser only partially implements this feature
Implementation note
  • If the font does not have superscript glyphs, then substitute characters are not synthesized (see bug 352218916).
Notes 2 item(s)
Limitation
  • This browser only partially implements this feature
Implementation note
  • If the font does not have superscript glyphs, then substitute characters are not synthesized (see bug 352218916).
Notes 2 item(s)
Limitation
  • This browser only partially implements this feature
Implementation note
  • If the font does not have superscript glyphs, then substitute characters are not synthesized (see bug 151471).
Notes 2 item(s)
Limitation
  • This browser only partially implements this feature
Implementation note
  • If the font does not have superscript glyphs, then substitute characters are not synthesized (see bug 352218916).
Notes 2 item(s)
Limitation
  • This browser only partially implements this feature
Implementation note
  • If the font does not have superscript glyphs, then substitute characters are not synthesized (see bug 151471).

Syntax

CSS 
.superscript {
  font-variant-position: super;
}
.subscript {
  font-variant-position: sub;
}

Live demo

Super(superscript)

CSS Super(superscript) demo.

PreviewFullscreen

Sub(subscript)

CSS Sub(subscript) demo.

PreviewFullscreen

Normal(normal)

CSS Normal(normal) demo.

PreviewFullscreen

Use cases

  • Refine text rhythm

    Use font-variant-position to make long-form reading or dense interface copy easier to scan and understand.

  • Support language nuances

    Apply font-variant-position when different writing systems or typographic conventions need more deliberate control.

Cautions

  • Test font-variant-position in the browsers you support, especially if it changes layout, text handling, or interaction behavior.
  • Plan a fallback or acceptable degradation path when support is still limited.

Accessibility

  • Check readability with zoom, narrow screens, and mixed-language content so text remains understandable.

Related links