🎯 What is CSS font-variant-caps?

The font-variant-caps property in CSS controls how uppercase and lowercase letters are displayed using alternative capitalization styles provided by a font.

This property allows you to create more elegant and professional typography by displaying text in styles such as small caps, petite caps, or unicase.

💡 In simple terms, font-variant-caps changes the appearance of letters without modifying the actual text content.

selector { 
    font-variant-caps: value; 
}
                

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

This is the default value.

No special capitalization style is applied, and the text appears exactly as written.

p { 
    font-variant-caps: normal; 
}
                

Converts lowercase letters into smaller uppercase letters while keeping original uppercase letters unchanged.

css text

Displays similar to:

CSS TEXT

Lowercase letters become smaller capital letters.

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

Displays both uppercase and lowercase letters using the small-caps style.

Css Text

Displays as:

CSS TEXT

with all letters appearing in a uniform small-cap style.

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

Uses a smaller version of small-caps provided by some advanced fonts.

⚠️ Font support is limited. If unsupported, browsers usually fall back to small-caps.

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

Displays all letters using the petite-caps style.

If the font does not support petite caps, browsers typically fall back to all-small-caps.

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

Displays uppercase and lowercase letters using a unified capitalization style.

This value works best with fonts that include dedicated unicase glyphs.

p { 
    font-variant-caps: unicase; 
}
                

Resets the property to its default value.

p { 
    font-variant-caps: initial; 
}
                

Inherits the font-variant-caps value from its parent element.

p { 
    font-variant-caps: inherit; 
}
                

<p class="small">
    hello world
</p>

<p class="all-small">
    HeLLo WoRLd
</p>
                

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

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

The first paragraph converts only lowercase letters into small capitals, while the second paragraph displays all characters using the small-caps style.

The small-caps value is widely supported in modern browsers. However, advanced values such as petite-caps, all-petite-caps, and unicase depend heavily on font support and may not be available in every typeface.

For the best compatibility, use:

font-variant-caps: small-caps;

The font-variant-caps property is a powerful typography feature that enhances text presentation by applying specialized capitalization styles. It is commonly used in headings, logos, book titles, navigation menus, and professional editorial designs where elegant typography is important.