CSS font-variant

The CSS font-variant property is used to define whether the text should be in small-caps or not. For example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      .one{font-variant: normal;}
      .two{font-variant: small-caps;}
   </style>
</head>
<body>

   <h2>font-variant: normal</h2>
   <p class="one">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>

   <h2>font-variant: small-caps</h2>
   <p class="two">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
   
</body>
</html>

Output

font-variant: normal

Lorem ipsum dolor sit amet consectetur adipisicing elit.

font-variant: small-caps

Lorem ipsum dolor sit amet consectetur adipisicing elit.

Note - The height of characters are same, but get capitalized using small-caps (small capitals).

CSS font-variant Syntax

The syntax of font-variant property in CSS, is:

font-variant: x;

The value of x should be any of the following:

normal - used to display the normal font. This is the default value
small-caps - used to capitalized the small letter characters, with same height
initial - used to use the default value
inherit - used to use the value inherited by the parent element

CSS Online Test

« Previous Tutorial Next Tutorial »