CSS font-variant-caps

The CSS font-variant-caps property is used when we need to control the usage of alternate glyphs for capital letters. For example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      .one{font-variant-caps: normal;}
      .two{font-variant-caps: small-caps;}
      .three{font-variant-caps: all-small-caps;}
      .four{font-variant-caps: petite-caps;}
      .five{font-variant-caps: all-petite-caps;}
      .six{font-variant-caps: titling-caps;}
      .seven{font-variant-caps: unicase;}
   </style>
</head>
<body>

   <h2>font-variant-caps: normal</h2>
   <p class="one">I am from Germany.</p>

   <h2>font-variant-caps: small-caps</h2>
   <p class="two">I am from Germany.</p>

   <h2>font-variant-caps: all-small-caps</h2>
   <p class="three">I am from Germany.</p>

   <h2>font-variant-caps: petite-caps</h2>
   <p class="four">I am from Germany.</p>

   <h2>font-variant-caps: all-petite-caps</h2>
   <p class="five">I am from Germany.</p>

   <h2>font-variant-caps: titling-caps</h2>
   <p class="six">I am from Germany.</p>

   <h2>font-variant-caps: unicase</h2>
   <p class="seven">I am from Germany.</p>
   
</body>
</html>

Output

font-variant-caps: normal

I am from Germany.

font-variant-caps: small-caps

I am from Germany.

font-variant-caps: all-small-caps

I am from Germany.

font-variant-caps: petite-caps

I am from Germany.

font-variant-caps: all-petite-caps

I am from Germany.

font-variant-caps: titling-caps

I am from Germany.

font-variant-caps: unicase

I am from Germany.

CSS font-variant-caps Syntax

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

font-variant-caps: x;

The value of x should be any of the following:

normal - used not to apply font-variant-caps
small-caps - used to convert all small letters to capital, without interfering the height of characters/letters
all-small-caps - used to convert all letters to capital, making the height of capital letters equal to small
petite-caps - used to make small letters in petite capitals
all-petite-caps - used to make all letters in petite capitals
titling-caps - used to apply titling capitals
unicase - used to display mixture of small capitals with normal lowercase letters
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 »