The font-variant property is a shorthand for typographic variants in a font — most famously small-caps, plus ligatures, numeric forms, and related OpenType features.
It sets longhands such as font-variant-caps, font-variant-ligatures, and font-variant-numeric. For beginners, start with small-caps. You can also set normal or small-caps through the font shorthand.
Not deprecated and not experimental. Advanced keywords only show their full effect when the active font includes those OpenType features.
font-variant: normal | none | small-caps | [ <variant-values> ]# | initial | inherit;The initial value is normal. Space-separated values can combine caps, ligatures, numerics, and other variant keywords.
| Value | Description | Try it |
|---|---|---|
small-caps | Lowercase letters become smaller capitals | Try it |
normal | No special variants. Initial value | Try it |
all-small-caps | Uppercase and lowercase use small-cap style | Try it |
none | Turns ligatures off; other longhands stay normal | Try it |
initial | Resets to normal | Try it |
inherit | Uses the parent’s font-variant | Try it |
Other common keywords (font-dependent): petite-caps, unicase, titling-caps, tabular-nums, oldstyle-nums, common-ligatures.
font-variantStart with small-caps, then explore longhands when you need finer control.
font-family (serif faces often show small-caps clearly).font-variant: small-caps; on headings, labels, or short phrases.all-small-caps if you want uppercase letters shrunk too.font-variant-caps longhand.| Piece | Required? | Role |
|---|---|---|
| Text content | Yes | Mixed case shows small-caps best |
| Variant keyword | Yes | small-caps, normal, and other values |
| Supporting font | Recommended | True small-cap glyphs look better than synthesized ones |
| Longhands | Optional | Use when you need only caps, ligatures, or numerics |
Change only font-variant on the sample. Watch how lowercase and uppercase behave differently.
Each snippet focuses on font-variant. Use Try It Yourself for a live editor.
Turn lowercase letters into smaller capitals; leave full caps tall.
<style>
p {
font-family: Georgia, serif;
font-variant: small-caps;
}
</style>
<p>CSS Typography</p>font-variant: small-caps maps lowercase to smaller capitals.CSS stays full height; typography shrinks.Shrink uppercase letters too for a uniform small-cap look.
<style>
p {
font-family: Georgia, serif;
font-variant: all-small-caps;
}
</style>
<p>CSS Typography</p>all-small-caps also converts CSS into small-cap glyphs.font-variant-caps.Turn variants off inside a small-caps parent.
<style>
p { font-variant: small-caps; }
span { font-variant: normal; }
</style>
<p>Small caps with a <span>normal</span> word.</p>small-caps for its children.font-variant: normal restores standard letterforms on the span.normal is also what initial restores to.If small-caps look odd or missing, check these first.
Browsers may synthesize smaller capitals from uppercase. True OpenType small-cap glyphs look cleaner when the font provides them.
font only allows small-capsInside the font shorthand, the only non-normal variant value is small-caps. Other keywords belong on font-variant itself.
Setting font-variant: small-caps can reset ligature or numeric longhands to their defaults. Set longhands after the shorthand if you need both.
none is not the same as normalnone turns ligatures off. normal leaves each longhand at its initial normal setting, which may still allow default ligatures.
Small-caps work best for short labels and headings. Long paragraphs in small-caps are harder to scan.
font-variant is a browser CSS shorthand for typographic variants. Node.js, Deno, and Bun do not apply it.
normal and small-caps work across modern browsers and Internet Explorer. Advanced OpenType keywords need supporting fonts.
Bottom line: Safe for normal and small-caps everywhere. Treat advanced numeric/ligature keywords as progressive enhancement. It is not a runtime API.
small-caps for lowercase as smaller capitals.font-variant-caps when you only need capital variants.normal. Inherited by default.One line: font-variant: small-caps; turns lowercase into smaller capitals.
Focus on capital variants with the dedicated longhand property.
8 people found this page helpful