CSS font-variant-caps Property

Definition and Usage

The font-variant-caps property controls alternate capital glyphs in a font, such as small capitals or titling capitals. It does not rewrite the characters the way text-transform does.

The initial value is normal. The property is inherited and applies to all elements and text, including ::first-letter and ::first-line. For a broader shorthand that can include caps, see font-variant.

CSS Syntax

Use exactly one keyword. The most common study values are normal, small-caps, and all-small-caps.

Property Values

all-petite-caps and unicase are also valid. They need fonts with matching OpenType features to look different from a fallback.

How to Use font-variant-caps

Pick a keyword, then check that the font can show the effect.

1. Choose the text that should use special capitals.
2. Set font-variant-caps to small-caps or all-small-caps for the usual beginner cases.
3. Use a font-family that includes real small-cap glyphs when you need a designed look.
4. Keep long body copy on normal if readability matters more than style.

Live Preview

Only font-variant-caps changes. Compare how the same sentence looks with each keyword.

CSS Examples

Each snippet focuses on font-variant-caps only. Use Try It Yourself for a live editor.

<style>
  p {
    font-variant-caps: small-caps;
  }
</style>

<p>Css Typography With Small Caps</p>

<style>
  p {
    font-variant-caps: all-small-caps;
  }
</style>

<p>Css Typography With Small Caps</p>

<style>
  p {
    font-variant-caps: normal;
  }
</style>

<p>Css Typography With Small Caps</p>

Key Takeaways