1. css
  2. /properties
  3. /font-variant-caps

font-variant-caps

Definition

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

Examples

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;
}

Values

ValueDescription
normalUses the default capitalization of the font
small-capsUses small capital letters for lowercase text
all-small-capsUses small capital letters for all text
petite-capsUses small capital letters that are shorter than the x-height for lowercase text
all-petite-capsUses small capital letters that are shorter than the x-height for all text
unicaseUses a mixed case of uppercase and lowercase letters, similar to title case
titling-capsUses uppercase letters that are designed for use in titles
initialSets the property to its default value
inheritInherits the property from its parent element

Best Practices

  • 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.

Browser Compatibility

ChromeFirefoxSafariInternet ExplorerMicrosoft EdgeOpera
YesYesYesYesYesYes