This is an important message requiring you to make a choice if you're based in the EU.

CSS font-variant Property

The font-variant property allows to set the text as normal or small-caps from a font family.

The font-variant property is displayed by two values: normal and small-caps. Normal is the default value. When we select small-caps for a text, it makes the lowercase letters to the uppercase letters, but these converted letters will be displayed a little smaller than normal uppercase letters.

The font-variant property can be included as part of a font shorthand declaration.

This property has been extended in CSS3.

Initial Value normal
Applies to All elements. It also applies to ::first-letter and ::first-line.
Inherited Yes.
Animatable No.
Version CSS1
DOM Syntax object.style.fontVariant = "normal";


font-variant: normal | small-caps | initial | inherit;


<!DOCTYPE html>
    <title>Title of the document</title>
      .smallcaps {
      font-variant: small-caps;
    <h2>Font-variant property example</h2>
    <p>Here we used a normal text as you can see.</p>
    <p class="smallcaps">But We Used A Text With Small-Caps Here.</p>


Value Description
normal Means that text characters will be normal. This is the default value of this property.
small-cups The browser displays a small-caps font.
initial Makes the property use its default value.
inherit Inherits the property from its parents element.

Browser support

1.0+ 12.0+ 1.0+ 1.0+ 3.5+

Do you find this helpful?

Related articles