font-variant

A shorthand property that lets you control advanced typographic features like small caps, old-style numerals, and special ligatures. It helps you make text look more professional and polished if the font supports it.

Quick example

.fancy-header {
  font-variant: small-caps;
  /* turns lowercase letters into smaller versions of capital letters */
}

Quick facts

Initial value
normal
Inherited
Yes
Applies to
all elements and text
Animation type
discrete

Values

normalnonestylistichistorical-formsstylesetcharacter-variantswashornamentsannotationsmall-capsall-small-capspetite-capsall-petite-capsunicasetitling-capsordinalslashed-zeroruby

font-variant Browser Support

Widely available Since 2015 96% global usage

This feature is well established and works across many devices and browser versions. It has been available across browsers since 2015.

Safe to use without fallbacks.

1+
1+
1+
12+
ESC