CSS font-variant-caps Property

In CSS1 and CSS2, the font-variant property specified small caps. In CSS3, it became a shorthand for several properties, including font-variant-caps. This property allows selecting alternate glyphs for small, petite capitals, and titling. Common values include:

normal
small-caps
all-small-caps
petite-caps
all-petite-caps
unicase
titling-caps

When a given font involves capital letter glyphs that are of different size, the font-variant-caps property selects the most suitable ones. If small capital glyphs are not available, they are rendered using uppercase glyphs.

Actual rendering depends on the font's OpenType feature support.

Initial Value	normal
Applies to	All elements. It also applies to ::first-letter and ::first-line.
Inherited	Yes.
Animatable	No.
Version	CSS3
DOM Syntax	object.style.fontVariantCaps = "petite-caps";

Syntax

Syntax of CSS font-variant-caps Property

font-variant-caps: normal | small-caps | all-small-caps | petite-caps | all-petite-caps | unicase | titling-caps;

Example of the font-variant-caps property:

Example of CSS font-variant-caps Property with all-small-caps, small-caps, and normal values

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document </title>
    <style>
      .all-small-caps {
        font-variant-caps: all-small-caps;
      }
      .small-caps {
        font-variant-caps: small-caps;
      }
      .normal {
        font-variant-caps: normal;
      }
    </style>
  </head>
  <body>
    <h2>Font-variant-caps property example</h2>
    <p class="all-small-caps">
      The font-variant-caps CSS property controls the use of alternate glyphs for capital letters.
    </p>
    <p class="small-caps">Small caps!</p>
    <p class="normal">Normal caps!</p>
  </body>
</html>

Try it Yourself »

Result

Values

Value	Description
normal	The use of alternate glyphs is not activated.
small-caps	Displays small capitals. Small-caps glyphs use the form of uppercase letters, but are reduced to the size of lowercase letters.
all-small-caps	Displays small capitals for both uppercase and lowercase letters.
petite-caps	Displays petite capitals.
all-petite-caps	Displays petite capitals for both uppercase and lowercase letters.
unicase	Displays a mixture of small capitals for uppercase letters with normal lowercase letters.
titling-caps	Displays titling capitals.

Note: initial and inherit are CSS-wide keywords and can be used with any CSS property.

Browser Compatibility

Browser	Support
Chrome	48+
Edge	79+
Firefox	34+
Safari	9.1+
Opera	35+

Note: font-variant-caps is part of the font-variant shorthand. When using the shorthand, explicitly include font-variant-caps to preserve its value, as other shorthand values may override it.

Practice

What does the CSS 'font-variant-caps' property do?

It is used to transform the text to uppercase or lowercase.
It allows the user to adjust the capitalization of the text.
It is used to control the weight (boldness) of the font.
It provides control over the use of alternate glyphs for capital letters and small caps.
It enables the use of unique font styles.