CSS Reference Property

font-variant

One type of variation within a font family is the small-caps. In a small-caps font the lower case letters look similar to the uppercase ones, but in a smaller size and with slightly different proportions. The font-variant property selects that font.

In CSS2, the value could take one of two values: normal and small-caps. A value of ‘normal’ selects a font that is not a small-caps font, ‘small-caps’ selects a small-caps font. If the font does not have a small-caps variation, it is acceptable (but not required) if the small-caps font is a created by taking a normal font and replacing the lower case letters by scaled uppercase characters. As a last resort, uppercase letters will be used as replacement for a small-caps font.

The result of the font variation is also affected by the value of the text-transform property.

If the value of the font-variant property is set to small-caps thenIf the value of the text-transform property is set to uppercase then all characters will be displayed in normal uppercase letters.

If the value of the font-variant property is set to small-caps thenIf the value of the text-transform property is set to lowercase then all characters will be displayed in low-caps.

The font-variant property also accepts a value of inherit, which allows the element to inherit the font variant value of its parent.

Trivia & Notes

The small-caps value of the font-variant property does not override the uppercasing set in the source code of the element. So, if, for example, you have a paragraph written in all-uppercase letters in the source code, and then you set font-variant: small-caps, the font will be rendered as regular uppercase and not small-caps.

In CSS3, the font-variant property has been extended—it becomes a shorthand for a list of font variant sub-properties such as font-variant-ligatures, font-variant-position, font-variant-caps, font-variant-numeric, font-variant-alternates, and others.

Official Syntax

  • Syntax:

    font-variant: normal | small-caps | inherit
  • Initial: normal
  • Applies To: all elements
  • Animatable: no

Notes

In CSS3, the official syntax changes to include all the property’s sub-properties and their values.

Values

normal
Selects the font that is not small-caps.
small-caps
Selects the small-caps font. If the font does not have a small-caps variation, some browsers will simulate a small-caps font by taking a normal font and replacing the lower case letters by scaled uppercase characters.
inherit
The value of the font-variant property is inherited from the font-variant property value of the element’s ancestor.

Notes

In CSS3, new values are introduced such as all-small-caps, unicase, titling-caps, and petite-caps, among others. None of those values are currently supported in any browser.

Examples

p {
    font-family: "Verdana", sans-serif;
    font-variant: small-caps;
}

h2 {
    font-variant: inherit;
}
                

Live Demo

Have a look at the live demo:

View this demo on the Codrops Playground

Browser Support

The small-caps value of the font-variant property works in all major browsers: Chrome, Firefox, Safari, Opera, Internet Explorer, and on Android and iOS.

The new values added in CSS3 have have no browser support at this time (February 2014).

Notes

In versions 6 and 7 of Internet Explorer, setting font-variant: small-caps will cause any text set to text-transform: uppercase or text-transform: lowercase to appear like text-transform: none.

Written by

Last updated February 4, 2015 at 3:27 pm by Mary Lou

Do you have a suggestion, question or want to contribute? Submit an issue.