CSS font-variant Property

The font-variant property is used to converted all lowercase letters into uppercase letters. But the converted upper letters appear too small font-size than the original uppercase letters.

In a small-caps font, all lowercase letters are converted to uppercase letters. However, the converted uppercase letters appears in a smaller font size than the original uppercase letters in the text.

The font-variant property specifies whether or not a text should be displayed in a small-caps font.

CSS Syntax

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

Possible Values

  • normal − Specifies a normal font face; that is, whatever is the default face for the font in use.

  • small-caps − Specifies a small-caps face; that is, a face in which lowercase characters are rendered as capital letters which are smaller than the letters used for uppercase characters.

Supported Browsers:

  • Firefox: 52.0, 2.0 -moz-
  • Google Chrome: 50.0, 4.0 -webkit-
  • Internet Explorer: 10.0
  • Safari: 9.0, 3.1 -webkit-
  • Opera: 37.0, 15.0 -webkit-, 11.1

Example -