1. css
  2. /properties
  3. /font-variant-position

font-variant-position

Definition

The font-variant-position property controls the vertical position of the small caps font variant relative to the baseline of the text.

Examples

Use the default small caps position for the body element:

body {
  font-variant-position: normal;
}

Align the small caps with the subscript baseline for the h1 element:

h1 {
  font-variant-position: sub;
}

Align the small caps with the superscript baseline for the blockquote element:

blockquote {
  font-variant-position: super;
}

Values

ValueDescription
normalSpecifies the default vertical position of the small caps
subAligns the small caps with the subscript baseline
superAligns the small caps with the superscript baseline
initialSets the property to its default value
inheritInherits the property from its parent element

Best Practices

  • Use font-variant-position to control the vertical alignment of small caps for better legibility and aesthetics of text, especially for titles, headings, and emphasis.
  • Choose small caps position settings that are appropriate for the specific font and context, as different settings may have different effects on the legibility and aesthetic balance of the text.
  • Be aware that not all fonts support small caps or small caps position, so test your font choices and settings on different devices and browsers to ensure consistent rendering.
  • Use small caps sparingly and strategically, as overuse may reduce the readability and accessibility of the text.

Browser Compatibility

ChromeFirefoxSafariInternet ExplorerMicrosoft EdgeOpera
YesYesYesYesYesYes