Using small caps with CSS font-variant

The CSS font-variant property controls alternate forms of a typeface. A common use is small caps:

p {
  font-variant: small-caps;
}

This does not simply make lowercase letters smaller. When the selected font includes real small-cap glyphs, the browser can use those instead. Otherwise, it may simulate the effect.

For the basic form of the property, the useful values are:

• normal uses the font’s normal glyphs and is the default.
• small-caps displays lowercase text as small capital letters.
• initial resets the property to its initial value.
• inherit takes the value from the parent element.

font-variant is a shorthand for several more specific properties, but for a simple small-caps treatment, this is all you need. Just check the result with the actual font you plan to use—the quality depends on the typeface.

← Back to all articles