font-variant-position
The font-variant-position CSS property sets whether to use alternate glyphs for subscript and superscript text. It is useful when you need more deliberate control over presentation or behavior in a focused part of the interface.
Overview
The font-variant-position CSS property sets whether to use alternate glyphs for subscript and superscript text. It is useful when you need more deliberate control over presentation or behavior in a focused part of the interface.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 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
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
Powered by web-features