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

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