🔠 CSS font-variant: Enhancing Typography with Small Caps and More
The CSS font-variant property is a handy tool that controls the display of alternate glyphs or typographic features, most commonly small caps. It helps you add refined, professional touches to your typography without needing different fonts.
🧾 What is font-variant?
font-variant is used to enable special typographic variants of fonts, such as small caps, unicase, or all small caps. Its most frequent use is to render uppercase letters in smaller uppercase forms called small caps, often used in headings, acronyms, or stylistic text.
🧬 Syntax
selector {
font-variant: normal | small-caps | inherit;
}
Values:
| Value | Description |
|---|---|
normal | Default text rendering without variant |
small-caps | Renders lowercase letters as smaller uppercase letters |
inherit | Inherits the property from the parent element |
🎯 Example Usage
h2 {
font-variant: small-caps;
}
<h2>This Heading Uses Small Caps</h2>
The above will display the text in small capital letters if the font supports it, otherwise the browser may simulate it.
🧠 How It Works
- When set to
small-caps, lowercase letters are replaced with smaller uppercase glyphs. - If the font family has true small caps glyphs, they will be used; otherwise, browsers simulate small caps by scaling uppercase letters, which may affect quality.
font-variantis part of the broader OpenType features and can be extended withfont-variant-*properties for more advanced typographic control.
🛠️ Related Properties (Advanced Usage)
font-variant-caps: Controls capitalization features (e.g., small-caps, all-small-caps, petite-caps)font-variant-numeric: Controls numeric styles (e.g., lining-nums, oldstyle-nums)font-variant-ligatures: Controls ligature features
Example:
p {
font-variant-caps: small-caps;
}
✅ Browser Support
- Full support for
font-variant: small-capsin all modern browsers. - More advanced variant features have varying support depending on browser and font.
🔚 Conclusion
The font-variant property is a simple yet elegant way to add typographic sophistication to your text, especially for emphasizing headings or acronyms using small caps.