CSS font-variant-position Property

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

☕ Buy a Coffee

Description

The font-variant-position 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.

Initial value: normal
Applies to: All elements
Inherited: Yes
Computed value: As specified
Animatable: No
JavaScript syntax: object.style.fontVariantPosition

Syntax

font-variant-position: normal | sub | super

Values

normalNone of the features listed below are enabled.
subEnables display of subscript variants (OpenType feature: subs).
superEnables display of superscript variants (OpenType feature: sups).

Example

HTML

<p class="normal">Normal!</p>

<p class="super">Super!</p>

<p class="sub">Sub!</p>

CSS

p {
  display: inline;
}

.normal {
  font-variant-position: normal;
}

.super {
  font-variant-position: super;
}

.sub {
  font-variant-position: sub;
}

Result

Editor