Font-Variant Property : Making Text Small Caps in CSS

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-variant normal
small-caps
Initial Value normal

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 :