1. css
  2. /properties
  3. /font-variant



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.


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;


normalDisplays the normal variant of the font
small-capsDisplays the small-caps variant of the font

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

ChromeFirefoxSafariInternet ExplorerMicrosoft EdgeOpera