The font-variant-caps property controls how capital letters render, letting you apply small-caps and other refined typographic cap styles.
Default caps.
Mini capitals.
Uniform caps.
Smaller caps.
Single case mix.
UI typography.
The font-variant-caps property in CSS allows you to control the use of alternate glyphs for capital letters. This can be particularly useful for setting text in small caps or other typographic variations, enhancing the visual appeal and readability of your content.
Unlike changing text-transform: uppercase, which simply makes every letter uppercase, font-variant-caps uses specially designed cap glyphs from the font when available. It is the modern, focused property for cap styling and pairs well with serif and display typefaces.
If you already know font-variant: small-caps, font-variant-caps: small-caps does the same cap styling with a clearer, more specific property name.
The syntax for the font-variant-caps property is straightforward. You can apply it to any element to specify how capital letters should be displayed:
element {
font-variant-caps: value;
}p {
font-variant-caps: small-caps;
}The default value of the font-variant-caps property is normal, which means no special capitalization is applied.
normal, small-caps, all-small-caps, petite-caps, all-petite-caps, unicase, and titling-caps.font-variant shorthand system alongside numeric and ligature sub-properties.normal to reset any cap variant styling.| Question | Answer |
|---|---|
| Initial value | normal |
| Applies to | All elements |
| Inherited | Yes |
| Most common value | small-caps |
| Related legacy property | font-variant |
| Value | Description |
|---|---|
normal | The default value. No special capitalization is applied |
small-caps | Displays lowercase letters as small uppercase letters |
all-small-caps | Displays both uppercase and lowercase letters as small uppercase letters |
petite-caps | Displays lowercase letters as petite uppercase letters |
all-petite-caps | Displays both uppercase and lowercase letters as petite uppercase letters |
unicase | Uses a single case for both uppercase and lowercase letters |
titling-caps | Uses a font's titling capitals |
Compare normal text with small-caps styling:
Use the small-caps value to display text in small caps, then compare cap styles, style labels, and apply titling caps to headings.
Start with the reference example — a paragraph using font-variant-caps: small-caps.
Display paragraph text in small capitals using the small-caps value.
p {
font-variant-caps: small-caps;
}Lowercase letters render as smaller cap-height glyphs. The browser uses OpenType small-cap features when the font provides them.
Compare three cap styles on the same mixed-case sentence.
.regular { font-variant-caps: normal; }
.small-caps { font-variant-caps: small-caps; }
.all-small-caps { font-variant-caps: all-small-caps; }With all-small-caps, uppercase letters also shrink to the small-cap size for a uniform look across the entire line.
Apply cap variants to labels and display headings.
Style a metadata label using petite capitals for subtle emphasis.
.category {
font-size: 0.8125rem;
font-variant-caps: petite-caps;
letter-spacing: 0.06em;
color: #64748b;
}Petite caps are slightly smaller than standard small caps, making them well suited for secondary labels above titles.
Apply titling capitals to a large headline when the font supports them.
.display-title {
font-family: Georgia, serif;
font-size: 2.25rem;
font-variant-caps: titling-caps;
font-weight: 400;
}Titling caps are drawn for display sizes and often have proportions optimized for large headlines rather than body text.
font-variant-caps WorksChoose a keyword such as small-caps or petite-caps.
It looks for alternate capital letter forms in the font's OpenType features.
Letters display using small, petite, unicase, or titling cap forms when available.
Capital letters appear in the selected typographic style without changing font-size.
The font-variant-caps property is supported in most modern browsers, including recent versions of Chrome, Firefox, Safari, Edge, and Opera. Visual quality still depends on the fonts you choose.
All keyword values work in current Chromium, Firefox, Safari, and Edge releases.
Bottom line: Safe for modern projects. Use fonts with OpenType cap features for the best small-caps quality.
The font-variant-caps property is a useful tool for web developers looking to enhance the typography of their web content. By utilizing different capitalization styles, you can improve the visual hierarchy and readability of your text.
Experiment with the various values of this property to see how they can improve the presentation of your content. Start with small-caps for labels and metadata, then explore petite-caps and titling-caps for display typography.
font-variant-caps over legacy shorthand when possibleletter-spacingnormal when neededtext-transform: uppercasefont-variant-capsUse these points when styling capital letters.
Capital styling.
PurposeNo variant.
DefaultMost common.
SyntaxUniform size.
VariantChildren inherit.
CascadeOpen the HTML editor, try font-variant-caps values like small-caps and petite-caps, and compare the results with your fonts.
5 people found this page helpful