Small caps have been a typographic staple for centuries, used to distinguish headings, acronyms, and emphasis text while maintaining readability. In modern web development, CSS provides elegant solutions for implementing small caps without compromising performance or accessibility.
The font-variant-caps property is part of the CSS Fonts Module Level 4 specification, giving developers precise control over capital letter rendering, from standard small caps to specialized titling capitals designed for headline contexts.
This property integrates seamlessly with other CSS typography features like font-variant-ligatures and font-variant-numeric, enabling sophisticated typographic systems without additional font file requests or JavaScript dependencies. For teams focused on professional web development practices, mastering these CSS font features elevates the overall design quality and user experience.
| Value | OpenType Feature | Description |
|---|---|---|
| normal | -- | Deactivates alternate glyphs (default) |
| small-caps | smcp | Uppercase letters rendered at lowercase size |
| all-small-caps | c2sc, smcp | Both upper and lowercase as small caps |
| petite-caps | pcap | Smaller capitals than small-caps |
| all-petite-caps | c2pc, pcap | Both cases as petite caps |
| unicase | unic | Mixed small caps uppercase with normal lowercase |
| titling-caps | titl | Uppercase designed for titling contexts |
Syntax and Implementation
The font-variant-caps property accepts a single keyword value from the list above. Here's how to use it in your CSS:
/* Individual property usage */
.heading {
font-variant-caps: small-caps;
}
/* With text-transform for lowercase content */
.acronym {
font-variant-caps: small-caps;
text-transform: uppercase;
}
/* Combining with other font-variant properties */
.editorial {
font-variant-caps: all-small-caps;
font-variant-ligatures: common-ligatures;
font-variant-numeric: oldstyle-nums;
}
/* In font shorthand */
.combined {
font: italic 400 small-caps 1rem/1.5 "Inter", sans-serif;
}
Browser Synthesis
When a font doesn't include small cap glyphs, browsers automatically synthesize them by scaling down regular uppercase letters. This fallback is seamless but may not match the quality of properly designed small caps in professional fonts. For practical DOM manipulation techniques, you can dynamically apply these styles based on feature detection. Understanding how CSS functions work alongside font features helps create robust typography systems that gracefully degrade across different browser environments.
When working with custom form controls in your projects, applying consistent typography with font-variant-caps creates a polished, professional appearance across all UI elements.
1/* Heading hierarchy with small caps */2h1, h2, h3 {3 font-variant-caps: titling-caps;4 text-transform: uppercase;5 letter-spacing: 0.05em;6}7 8h4, h5, h6 {9 font-variant-caps: small-caps;10 letter-spacing: 0.03em;11}12 13/* Acronym styling */14.acronym {15 font-variant-caps: small-caps;16 font-size: 0.9em;17 letter-spacing: 0.05em;18}19 20/* Editorial elements */21.author-byline {22 font-variant-caps: all-small-caps;23 font-size: 0.875rem;24 letter-spacing: 0.08em;25}26 27/* Navigation and UI */28.nav-link {29 font-variant-caps: petite-caps;30 text-transform: uppercase;31 font-size: 0.75rem;32 letter-spacing: 0.1em;33}34 35/* Fallback font stack for quality small caps */36.quality-small-caps {37 font-family: "Inter", "Source Sans Pro", sans-serif;38 font-variant-caps: small-caps;39}| Aspect | font-variant-caps | text-transform: uppercase |
|---|---|---|
| Glyphs used | Purpose-designed small cap glyphs | Scaled regular uppercase |
| Typography quality | Higher (proper design) | Lower (synthetic) |
| Accessibility | Better word shapes preserved | Reduced readability |
| Use case | Editorial, headings | Actual uppercase content |
| Browser support | Excellent since 2020 | Universal |
Choose Quality Fonts
Select fonts that include properly designed small cap glyphs for the best typographic results.
Prefer font-variant-caps
Use font-variant-caps over text-transform for small caps to get properly designed glyphs.
Reserve for Headings
Use small caps for headings and brief emphasis, not extended body text passages.
Add Letter-Spacing
Small caps often benefit from increased letter-spacing (0.03em-0.08em) for better readability.
Test Across Browsers
Verify rendering across target browsers and devices despite excellent support.
Use Titling-Caps for Headlines
For uppercase headlines, titling-caps provides a more refined appearance than standard uppercase.