Font-variant Property :

  1. Font-variant property causes letters to appear in uppercase but scaled slightly smaller than capitalized letters.
  2. The capitalized letter maintains its case and size,
  3. All lowercase letters are displayed in the capital letters scaled slightly smaller than any real capital letters.
  4. Generally used in Heading but will looks ugly if used in long paragraphs.

Different Possible Values Accepted :

font-variantnormal
small-caps
Initial Valuenormal

Live Example :

<html>
    <head>
        <style>
            p.normal {
                font-size:20px;
                font-variant:normal
            }
            p.scaps {
                font-size:20px;
                font-variant:small-caps
            }
        </style>
    </head>
    <body>
        <p class="normal">Font shown in : Normal</p>
        <p class="scaps">Font shown in : Small Caps</p>
    </body>
</html>

Output :

Font Variants Property in CSS