The font-variant property selects a normal, or small-caps face from a font family. Setting font-variant is also possible by using the font shorthand.

  • Initial valuenormal
  • Applies toAll elements
  • InheritedYes
  • MediaVisual
  • Computed valueSee individual properties
  • AnimatableNo
  • CSS VersionCSS1, CSS2, CSS3
  • JavaScript syntaxobject.style.fontVariant
Formal syntax: normal | small-caps

font-variant: normal;
font-variant: small-caps;
  • normalSelects a font that is not a small-caps font, usually the available normal font.
  • small-capsSelects a small-caps font. If no small caps variant is available, the browser generates a small caps approximation.
  • inherit
.class {font-variant: small-caps;}

Click the button below to experiment with this property.

Give it a Try!

1+Firefox6+Explorer1+Chrome1.2+Safari8+Opera


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.