CSS font-variant-caps Property

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

Description

The font-variant-caps property allows the selection of alternate glyphs used for small or petite capitals or for titling. These glyphs are specifically designed to blend well with the surrounding normal glyphs, to maintain the weight and readability which suffers when text is simply resized to fit this purpose.

Initial value
normal
Applies to
All elements
Inherited
Yes
Computed value
As specified
Animatable
No
JavaScript syntax
object.style.fontVariantCaps

Interactive Demo

Difficult waffles

Syntax

font-variant-caps: normal | small-caps | all-small-caps | petite-caps | all-petite-caps | unicase | titling-caps

Values

  • normalNone of the features listed below are enabled.
  • small-capsEnables display of small capitals (OpenType feature: smcp). Small-caps glyphs typically use the form of uppercase letters but are reduced to the size of lowercase letters.
  • all-small-capsEnables display of small capitals for both upper and lowercase letters (OpenType features: c2sc, smcp).
  • petite-capsEnables display of petite capitals (OpenType feature: pcap).
  • all-petite-capsEnables display of petite capitals for both upper and lowercase letters (OpenType features: c2pc, pcap).
  • unicaseEnables display of mixture of small capitals for uppercase letters with normal lowercase letters (OpenType feature: unic).
  • titling-capsEnables display of titling capitals (OpenType feature: titl). Uppercase letter glyphs are often designed for use with lowercase letters. When used in all uppercase titling sequences they can appear too strong.

Example

<p class="small-caps">Firefox rocks, small caps!</p>
<p class="normal">Firefox rocks, normal caps!</p>
.small-caps {
  font-variant-caps: small-caps;
  font-style: italic;
}
.normal {
  font-variant-caps: normal;
  font-style: italic;
}

Browser Support

The following table will show you the current browser support for the CSS font-variant-caps property.

Desktop
Edge Chrome Firefox Opera Safari
795234399.1
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview
5234419.3652

Last updated by CSSPortal on: 2nd January 2024