CSS font-variant

The CSS font-variant property is used to control the display of text in a font by specifying certain variations of the font, such as small caps or ligatures. It allows you to apply different typographic features to text, providing more control over how the text appears on the web page.

The font-variant property can take the following values:

1. normal (default): The font is displayed with its default typographic features.
2. small-caps: The font is displayed with small capitals for lowercase letters. If the font does not have small capitals, the browser may try to generate them.
3. all-small-caps: The font is displayed with small capitals for both uppercase and lowercase letters. If the font does not have small capitals, the browser may try to generate them.
4. petite-caps: The font is displayed with small capitals that are slightly smaller than regular small capitals.
5. all-petite-caps: The font is displayed with small capitals for both uppercase and lowercase letters, where the lowercase small capitals are slightly smaller than regular small capitals.
6. unicase: The font is displayed with unicase characters, which are a mix of uppercase and lowercase glyphs.
7. titling-caps: The font is displayed with titling capitals, which are typically larger and designed for use in titles.

Example:

p {
  font-variant: small-caps;
}

In this example, the <p> elements will be displayed with small capitals for lowercase letters, giving them a distinctive typographic style.

It’s important to note that not all fonts support all the variations provided by font-variant. The availability of these variations depends on the font used and the support of the user’s operating system and browser. Therefore, it’s essential to test the font variants in different environments to ensure consistent display.

Additionally, some typographic features, such as ligatures, are controlled by separate CSS properties (font-variant-ligatures), which provide more fine-grained control over ligature display. For ligatures specifically, you can use the font-variant-ligatures property instead of font-variant.

p {
  font-variant-ligatures: common-ligatures discretionary-ligatures;
}

As with any CSS property, consider the overall design and readability of the text when applying font variants, and use them judiciously to enhance the typography and visual appeal of your web page.