By using this site you agree to the use of cookies by Brugbart and our partners.

Learn more

CSS Font-variant Property

Reference on the Font-variant property of CSS.

Edited: 2015-12-04 10:46

The font-variant property will render characters of the font in small-caps.

When this property is applied to an element, the all the lowercase letters in that element will be converted to uppercase letters, but they will be rendered in a smaller font-size than normal uppercase letters.

The font-variant property is typically used on headings and paragraphs, but will also work on other elements containing text.

Possible Values

  • normal (Default)
  • small-caps

Inherited? - Yes!

CSS StyleSheet code example

p {
  font-variant: small-caps;
}

Font-variant example

In this example we have used the font-variant property to change some text contained in a paragraph element:

<p style="font-variant:small-caps;">This is just some text showing how font-variant is affecting elements when applied.</p>

The above will look like:

This is just some text showing how font-variant is affecting elements when applied.