CSS font-variant-position Property

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The font-variant-position property controls how a font presents alternate glyphs that are specifically designed to sit above or below the font’s normal baseline. Rather than moving glyphs by changing layout metrics, this property selects the typographic alternates provided by the font (when available) that are intended for raised or lowered positioning. That selection affects the glyph shapes and their optical relationship to surrounding text, which can be important for chemical formulas, footnote markers, ordinal indicators, or typographic conventions in different writing systems.

Because it instructs the font to use built-in positional alternates, the visual result differs from simply offsetting text with layout properties. It works at the glyph level and can change which contour or metrics the font uses, so kerning, side bearings, and optical weight can shift subtly compared with mechanically shifting a normal glyph. This is why you may want to consider the effect on overall rhythm and spacing when combining font-feature-settings with font-variant controls — some features are complementary while others may compete for the same OpenType features in a font.

From a layout standpoint, the property is distinct from properties that move or align boxes. For instance, altering glyph position at the font feature layer is not the same as changing vertical placement with vertical-align, which shifts the entire inline box and affects line height and vertical rhythm. Similarly, decisions about when to use positional alternates should consider typographic scale and spacing set by font-size and line-height, because the intended optical effect of alternate glyphs can depend on the surrounding text size and the leading used in a design.

In practice, the property is most useful when you want a semantically and typographically correct result that relies on the font’s own design choices rather than a mechanical workaround. It provides a more authentic, often more readable result for raised or lowered textual elements when the font includes those alternates. When a font lacks appropriate alternates, user agents will fall back to a default presentation, so testing across chosen typefaces is important to ensure consistent appearance.

Definition

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

<div class="container">

  <h2>font-variant-position demo</h2>

  <p>Normal: <span class="normal">H2O</span></p>

  <p>Subscript: <span class="sub">H2O</span></p>

  <p>Superscript: <span class="super">x2 + y2 = z2</span></p>

</div>

CSS

.container {
  font-family: Georgia, "Times New Roman", serif;
  padding: 20px;
}

.container h2 {
  margin: 0 0 12px;
  font-size: 18px;
}

.container p {
  margin: 8px 0;
}

.container span {
  display: inline-block;
  padding: 0 6px;
  border-radius: 4px;
  background: #f7f7f7;
}

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

.container .sub {
  font-variant-position: sub;
  font-size: 0.8em;
}

.container .super {
  font-variant-position: super;
  font-size: 0.8em;
}

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS font-variant-position property. Hover over a browser icon to see the version that first introduced support for this CSS property.