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 valuenormal
  • Applies toAll elements
  • InheritedYes
  • MediaVisual
  • Computed valueAs specified
  • AnimatableNo
  • CSS VersionCSS3
  • JavaScript
Formal syntax: normal | small-caps | all-small-caps | petite-caps | all-petite-caps | unicase | titling-caps

font-variant-caps: normal;
font-variant-caps: small-caps;
font-variant-caps: all-small-caps;
font-variant-caps: petite-caps;
font-variant-caps: all-petite-caps;
font-variant-caps: unicase;
font-variant-caps: titling-caps;
  • 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.
.class {
   font-variant-caps: small-caps;

Last updated on 23rd March 2014 By Rene Spronk

View All CSS Properties

Errors? Please help to keep this list up to date, If you find any errors, please contact us, so that we can get them fixed.