Font-variant property
Last updated: 2026-09-13
font-variant Font-variant property
The font-variant CSS property applies font variant effects such as small-caps, which renders lowercase letters as reduced-size capital letters. The small-caps value is the most widely supported feature.
| Category | |
|---|---|
| Initial Value | normal |
| Inherited | Yes |
| Applies To | |
| Animation Type | |
| CSS Version | CSS1 |
| Status | Standard |
📝 Syntax
font-variant: normal | small-caps;⚙️ Values
| Value | Type | Description |
|---|---|---|
normal | small-caps | Keyword | Font variant (small capital letters) |
▶ Example
Edit the code below and see the live result in the playground:
🌐 Browser Support
| Browser |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| font-variant | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| Supported in all major browsers | |||||
Tip： small-caps keeps the size of existing capitals and only converts lowercase letters to small capitals, which suits English headings.
❓ FAQ
QDoes the small-caps value of font-variant work with Chinese text?
Asmall-caps renders lowercase letters as small capital letters; Chinese has no case concept, so Hanzi are unaffected, though any Latin letters in the paragraph are changed. If the text is already all uppercase, small-caps leaves the size unchanged.
QWhat is the difference between font-variant: small-caps and text-transform: uppercase?
Auppercase converts every letter to regular capitals whose height matches the digits; small-caps uses reduced-size capital glyphs that preserve the relative height of the original lowercase letters, giving a more elegant look suited to English headings and acronyms.
QWhat can the font-variant shorthand property do in modern CSS?
ACSS3 expanded font-variant into a shorthand controlling ligatures (font-variant-ligatures), numeric forms (font-variant-numeric), and more. For example, font-variant-numeric: tabular-nums makes digits monospaced for alignment in tables and price lists.
🏷️ Related Properties
💡 Related Cases
📚 Related Tutorials
