Fonts
font-variant-caps
font-variant-caps changes how capitals are shown, for example turning lowercase letters into small capitals: capital letterforms shrunk to the height of lowercase letters.
Syntax
normal | small-caps | all-small-caps | petite-caps | all-petite-caps | unicase | titling-capsPreview
Presets
Drag the bottom-right corner to resize
Code
.box {
font-family: Inter, sans-serif;
font-variant-caps: small-caps;
}Controls
font-variant-capssmall-caps
About
Values
normal: the regular glyphs. This is the initial value.small-caps: lowercase letters become small capitals; capitals stay as they are.all-small-caps: both capitals and lowercase letters become small capitals.petite-capsandall-petite-caps: petite capitals, even smaller than small capitals. Theall-value changes capitals too.unicase: capitals become small capitals while lowercase letters stay, mixing letterforms of similar height.titling-caps: lighter capitals designed for all-capital headings.
When the font lacks the glyphs
Every value uses an OpenType feature of the font (smcp, pcap and so on). If the font has no such glyphs, small-caps and all-small-caps are imitated by shrinking capitals. Missing petite capitals fall back to small capitals, a missing unicase shrinks only the capitals, and a missing titling-caps changes nothing.
So that the preview looks the same everywhere, it uses Inter, which the site already loads, as a supporting declaration. That Inter has neither petite capitals nor titling capitals, so petite-caps looks like small capitals and titling-caps looks like normal.