font-variant-position property CSS Reference

Definition and Usage

This property is used to enable typographic subscript and superscript glyphs. These are alternate glyphs designed within the same em-box as default glyphs and are intended to be laid out on the same baseline as the default glyphs, with no resizing or repositioning of the baseline. They are explicitly designed to match the surrounding text and to be more readable without affecting the line height.

Value:normal | sub | super
Applies to:all elements
Computed value:as specified


font-variant-position : normal | sub | super;


The values 'sub' and 'super' imply the appropriate variant glyph is displayed when available in the font (OpenType features: subs, sups). A value of 'normal' implies neither of these alternate glyphs are substituted.

Because of the semantic nature of subscripts and superscripts, when the value is either 'sub' or 'super' for a given run of text and a variant glyph is not available for all the characters in the run, simulated glyphs are synthesized for all characters using reduced forms of the default glyph. This is done to avoid a mixture of variant glyphs and synthesized ones within the same run of text, since there is no guarantee that two types of glyphs would be aligned correctly.

In the case of OpenType fonts that lack subscript or superscript glyphs for a given character, user agents must use the appropriate subscript and superscript metrics specified in the selected font's OS/2 table to calculate the size and offset of the synthesized substitutes.

In the past, user agents have used font-size and vertical-align to simulate subscripts and superscripts for the sub and sup elements. To allow a backwards compatible way of defining subscripts and superscripts, it is recommended that authors use conditional rules so that older user agents will still render subscripts and superscripts via the older mechanism.

Authors should note that fonts typically only provide subscript and superscript glyphs for a subset of all characters supported by the font. While subscript and superscript glyphs are often available for Latin numbers, glyphs for punctuation and letter characters are less frequently provided. The synthetic fallback rules defined for this property assure that subscripts and superscripts will always appear but the appearance may not match author expectations if the font used does not provide the appropriate alternate glyph for all characters contained in a subscript or superscript.

This property is not cumulative, applying it to subelements within a subscript or superscript won't nest the placement of a subscript or superscript glyph. Images contained within text runs where the value of this property is 'sub' or 'super' will be drawn just as they would if the value was 'normal'. Likewise, text decorations such as underlines or emphasis marks will render in the same position as they would for the default glyphs, since this property does not affect the baseline position.

Because of these limitations, font-variant-position is not recommended for use in user agent stylesheets. Authors should use it in cases where subscripts or superscripts will only contain the narrow range of characters supported by the fonts specified.


@supports ( font-variant-position: sub ) {
  sub {
    vertical-align: inherit;
    font-size: 100%;
    line-height: inherit;
    font-variant-position: sub;

Relative articles