font-variant

Definition

The font-variant property allows you to control the appearance of the font variants in text. Specifically, it lets you choose between the normal and small-caps variants of a font.

Examples

This example sets the font-variant to normal for a heading element:

h1 {
  font-variant: normal;
}

This example sets the font-variant to small-caps for a paragraph element:

p {
  font-variant: small-caps;
}

This example uses a custom font and sets the font-variant to small-caps for a heading element:

@font-face {
  font-family: 'MyFont';
  src: url('myfont.woff2') format('woff2');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

h1 {
  font-family: 'MyFont', sans-serif;
  font-variant: small-caps;
}

Values

Best Practices

• Use font-variant: small-caps sparingly, as it can be difficult to read in large blocks of text.
• If you want to use small-caps text, consider using a font that was specifically designed for that purpose.
• Be mindful of the contrast between small-caps text and regular text. If the contrast is too low, the small-caps text may be difficult to read.
• Avoid using font-variant: small-caps for text that needs to be translated into other languages, as the small-caps letters may not have equivalents in the other language's character set.
• Test your font-variant styles on different devices and screen sizes to ensure that they are legible.

Browser Compatibility