fontvariant

Font variant refers to the alternative designs or forms a typeface can render for its glyphs. In typography, fonts may provide multiple variants for letters, numerals, and symbols, such as small capitals, oldstyle numerals, or alternate glyphs. In web design, font-variant-related features let developers request these variants when a font offers them, influencing how text is displayed.

The core CSS feature is font-variant, which acts as a shorthand for selecting available typographic variants. The most common usage is font-variant: small-caps, which renders lowercase letters as small capitals when the font provides appropriate glyphs. Because support depends on the font and the browser, some environments may simply fall back to normal lowercase forms if small-cap glyphs are unavailable.

Modern typography on the web often uses more granular properties to control OpenType features. These include font-variant-caps, font-variant-numeric, font-variant-ligatures, and font-variant-alternates. These properties enable a more precise set of features such as different caps styles, numerical forms (like oldstyle or lining figures), ligature behavior, and stylistic sets offered by the font. To activate them, you typically enable the desired feature via values like normal, small-caps, or specific OpenType feature names, depending on browser support.

Browser and font compatibility is a key consideration. Not all fonts include all variants, and not all browsers implement every font-variant-related feature. For predictable results, test across platforms and choose fonts with robust OpenType support, providing sensible fallbacks when a requested variant is unavailable.