font-variant-caps | WebReference

Definition

The font-variant-caps property controls the capitalization of text using different font variations.

Apply small caps to the text in the h1 element:

h1 {
  font-variant-caps: small-caps;
}

Apply all caps to the text in the p element:

p {
  font-variant-caps: all-small-caps;
}

Use the petite-caps value to apply small capital letters that are shorter than the x-height to the text in the blockquote element:

blockquote {
  font-variant-caps: petite-caps;
}

Value	Description
`normal`	Uses the default capitalization of the font
`small-caps`	Uses small capital letters for lowercase text
`all-small-caps`	Uses small capital letters for all text
`petite-caps`	Uses small capital letters that are shorter than the x-height for lowercase text
`all-petite-caps`	Uses small capital letters that are shorter than the x-height for all text
`unicase`	Uses a mixed case of uppercase and lowercase letters, similar to title case
`titling-caps`	Uses uppercase letters that are designed for use in titles
`initial`	Sets the property to its default value
`inherit`	Inherits the property from its parent element

Use font-variant-caps to add emphasis and hierarchy to your typography, but be mindful of its effect on legibility and readability.
Consider the context and purpose of your text when choosing a capitalization style, as some styles may be more appropriate for certain types of content and messages than others.
Use small caps sparingly, as they may be harder to read for some users, particularly those with visual impairments.
Be aware that not all fonts support all capitalization styles, so test your font choices and settings on different devices and browsers to ensure consistent rendering.
Consider using fallback fonts for greater compatibility and consistency across different devices and platforms.

Chrome	Firefox	Safari	Internet Explorer	Microsoft Edge	Opera
Yes	Yes	Yes	Yes	Yes	Yes