Widely available Supported across all major browsers. Safe to use in production.

font-variant-caps

The font-variant-caps CSS property controls the use of alternate glyphs used for small or petite capitals or for titling.

Typography

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
font-variant-caps
52
79
34
9.1
52
9.3
all-petite-caps
52
79
34
9.1
52
9.3
all-small-caps
52
79
34
9.1
52
9.3
normal
52
79
34
9.1
52
9.3
petite-caps
52
79
34
9.1
52
9.3
small-caps
52
79
34
9.1
52
9.3
titling-caps
52
79
34
9.1
52
9.3
unicase
52
79
34
9.1
52
9.3
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)

Syntax

CSS 
.small-caps {
  font-variant-caps: small-caps;
}
.all-small {
  font-variant-caps: all-small-caps;
}
.title { font-variant-caps: titling-caps; }

Live demo

small-caps

CSS Small-caps demo.

PreviewFullscreen

all-small-caps

CSS All-small-caps demo.

PreviewFullscreen

titling-caps

CSS Titling-caps demo.

PreviewFullscreen

Use cases

  • Using font-variant-caps

    The font-variant-caps CSS property controls the use of alternate glyphs used for small or petite capitals or for titling.

Cautions

  • May not be supported in older browsers.

Accessibility

  • Make sure visual changes are conveyed appropriately to assistive technology.

Related links