W3docs
en
Log in

CSS font-variant Property

The CSS font-variant property allows setting the text as normal or small-caps from a font-family. Try font-variant property examples!

The font-variant property sets text to normal or small-caps.

The font-variant property can have two values: normal and small-caps. Normal is the default value. When we select small-caps for a text, it converts lowercase letters to 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.

Info

This property has been extended in CSS Fonts Module Level 4. In modern CSS, the font-variant property can take several additional values (e.g., petite-caps, all-petite-caps, all-small-caps, titling-caps). Note that browser support for these modern values may vary.

Initial Valuenormal
Applies toAll elements. It also applies to ::first-letter and ::first-line.
InheritedYes.
AnimatableNo.
VersionCSS1
DOM Syntaxobject.style.fontVariant = "normal"; <br>(Note: fontVariant is the camelCase JavaScript property name for font-variant.)

Syntax

Syntax of CSS font-variant Property

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

Example of the font-variant property:

Example of CSS font-variant Property with small-caps

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .smallcaps {
        font-variant: small-caps;
      }
    </style>
  </head>
  <body>
    <h2>Font-variant property example</h2>
    <p>Here we used a normal text as you can see.</p>
    <p class="smallcaps">However, this text uses small-caps.</p>
  </body>
</html>
Try it Yourself »

Result

CSS font-variant Property

Values

ValueDescriptionPlay it
normalMeans that text characters will be normal. This is the default value of this property.Play it »
small-capsConverts lowercase letters to uppercase, but displays them at a smaller size than regular uppercase letters.Play it »
all-small-capsConverts all letters to small-caps.Play it »
titling-capsDisplays text in titling caps, typically used for titles.Play it »
initialSets the property to its default value.Play it »
inheritInherits the property value from its parent element.

Practice

Practice

What does the CSS property 'font-variant' do?