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

font-synthesis-position

Experimental: This is an experimental technology

Check the Browser compatibility table carefully before using this in production.

The font-synthesis-position CSS property lets you specify whether or not a browser may synthesize the subscript and superscript "position" typefaces when they are missing in a font family, while using font-variant-position to set the positions.

The font-synthesis-position property has no effect when using the <sup> and <sub> elements.

It is often convenient to use the shorthand property font-synthesis to control all typeface synthesis values.

Typography

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
font-synthesis-position
Experimental
118
auto
Experimental
118
none
Experimental
118
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)

Syntax

CSS 
.precise-math {
  font-synthesis-position: none;
  font-variant-position: sub;
}
sup {
  font-synthesis-position: auto;
}

Live demo

composite none(none)

CSS composite none(none) demo.

PreviewFullscreen

composite with(auto)

CSS composite with(auto) demo.

PreviewFullscreen

Comparison

CSS comparison demo.

PreviewFullscreen

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