font-synthesis-position
The font-synthesis-position CSS property sets whether or not the browser should synthesize subscript and superscript typefaces when they're missing from the font. It is useful when you need more deliberate control over presentation or behavior in a focused part of the interface.
Overview
The font-synthesis-position CSS property sets whether or not the browser should synthesize subscript and superscript typefaces when they're missing from the font. 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 | |
font-synthesis-position Experimental | | | 118 | | | |
auto Experimental | | | 118 | | | |
none Experimental | | | 118 | | | |
Syntax
.precise-math {
font-synthesis-position: none;
font-variant-position: sub;
}
sup {
font-synthesis-position: auto;
}Live demo
Use cases
Refine text rhythm
Use font-synthesis-position to make long-form reading or dense interface copy easier to scan and understand.
Support language nuances
Apply font-synthesis-position when different writing systems or typographic conventions need more deliberate control.
Cautions
- Test font-synthesis-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