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

font-variant-caps

The font-variant-caps CSS property sets whether text should be displayed in small caps, petite caps, or with capital letters designed for titles.

Typography

Overview

The font-variant-caps CSS property sets whether text should be displayed in small caps, petite caps, or with capital letters designed for titles.

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 sets whether text should be displayed in small caps, petite caps, or with capital letters designed for titles.

Cautions

  • May not be supported in older browsers.

Accessibility

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

Related links

Powered by web-features