The font-variant property is used to specify variations or alternate styles of a font. It allows you to apply special typographic effects to text, such as small caps or stylistic alternates. The property accepts several values, including normal, small-caps, all-small-caps, petite-caps, all-petite-caps, unicase, titling-caps, and more.

Here’s an example:

h1 {
  font-variant: small-caps;

In this example, the font-variant: small-caps; rule sets the text within <h1> elements to be displayed in small capitals. This effect transforms lowercase letters into smaller uppercase letters, providing a distinct typographic style.

The font-variant property is useful for adding typographic variations and visual interest to text. It allows you to explore different font styles and effects to enhance the appearance of your content.

Related posts