The font-variant property switches on alternate letter styles such as small capitals, giving your typography a refined, editorial look.
Default glyphs.
Mini capitals.
Smaller caps.
Mixed case.
Section tags.
Title styling.
The font-variant property in CSS is used to control the usage of alternate glyphs within a font. It allows you to specify whether certain characters, such as small capitals or old-style figures, should be used.
This property can enhance the typographic presentation of your text, adding a unique touch to your web content. It is especially popular for labels, abbreviations, and elegant headings.
When you set font-variant: small-caps, lowercase letters render as smaller uppercase-style capitals. The browser uses dedicated small-cap glyphs when the font provides them; otherwise it may synthesize a similar effect. For finer control in modern CSS, related properties like font-variant-caps are also available.
Small caps look like uppercase letters but at a reduced height. They are not the same as typing in all caps with a smaller font-size — true small caps are designed for even letter spacing and weight.
The syntax for the font-variant property is straightforward. It can be applied to any text element:
element {
font-variant: value;
}.small-caps {
font-variant: small-caps;
}The default value of the font-variant property is normal, which means no special variant glyphs are used and the text is displayed in its normal form.
font-variant can act as a shorthand for several sub-properties.normal to reset any variant styling.| Question | Answer |
|---|---|
| Initial value | normal |
| Applies to | All elements |
| Inherited | Yes |
| Most common value | small-caps |
| Modern alternative | font-variant-caps |
| Value | Description |
|---|---|
normal | The default value, which specifies a normal font face without any variants |
small-caps | Transforms lowercase letters into smaller uppercase letters |
all-small-caps | Changes all characters to small caps, including uppercase characters |
petite-caps | Transforms lowercase letters into petite capitals, a smaller version of small-caps |
all-petite-caps | Changes all characters to petite caps, including uppercase characters |
unicase | A mix of uppercase and lowercase letters for stylistic purposes |
titling-caps | Uses a titling font, which is designed for use in titles |
Compare normal text with small-caps styling:
Transform text into small capitals, then compare cap styles, style section labels, and apply variants to headings.
Start with the reference example — paragraph text in small-caps.
Apply font-variant: small-caps to transform lowercase letters into small capitals.
.small-caps {
font-variant: small-caps;
}Lowercase letters render as smaller cap-height glyphs. Uppercase letters typically stay at full cap height unless you use all-small-caps.
See how each cap variant changes the same sentence.
.regular { font-variant: normal; }
.small-caps { font-variant: small-caps; }
.all-small-caps { font-variant: all-small-caps; }With all-small-caps, even uppercase letters shrink to the small-cap size for a uniform appearance.
Apply font variants to labels and headings for polished design details.
Style a category label using petite capitals for a subtle editorial look.
.section-label {
font-size: 0.8125rem;
font-variant: petite-caps;
letter-spacing: 0.08em;
color: #64748b;
}Petite caps are slightly smaller than standard small caps, making them ideal for understated labels above headings.
Use titling caps on a headline when the font provides a dedicated titling variant.
.article-title {
font-family: Georgia, serif;
font-size: 2rem;
font-variant: titling-caps;
font-weight: 400;
}Titling caps are designed for display sizes, often with adjusted proportions suited to large headlines.
font-variant WorksSet a keyword such as small-caps or petite-caps.
It looks for alternate glyphs or OpenType features that match the requested variant.
Letters display using small caps, petite caps, unicase, or titling forms when available.
Text gains stylistic cap variants without changing font-family or font-size.
The font-variant property is supported in most modern browsers, including recent versions of Chrome, Firefox, Safari, Edge, and Opera. Always test with your chosen font because variant support depends on the typeface.
Keyword values are widely supported; visual quality depends on whether the font includes true variant glyphs.
Bottom line: Safe for modern projects. Pick fonts with OpenType cap variants for the best small-caps appearance.
The font-variant property is a useful tool for web developers looking to enhance the typographic presentation of their text. By using this property, you can add stylistic variations to your fonts, making your web content more visually appealing and engaging.
Experiment with different values to see how this property can improve the look and feel of your text. Start with small-caps for labels and headings, then explore petite-caps and titling-caps for finer control.
small-caps for labels and abbreviationsletter-spacingnormal when neededfont-variant-caps for modern projectsfont-variantUse these points when styling cap variants.
Variant letters.
PurposeStandard text.
DefaultMost common.
SyntaxUniform caps.
VariantChildren inherit.
CascadeOpen the HTML editor, try font-variant values like small-caps and petite-caps, and compare the results with your fonts.
5 people found this page helpful