CSS font-variant Property

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The font-variant CSS property controls which alternate glyph forms and typographic variants a browser will request from the active type face when rendering text. It is a high-level way to ask the font to use different letterforms (for example, alternate caps, different numeric styles, or contextual ligatures) without changing which font family is selected. Because the property only affects glyph selection and shaping it works together with the chosen font-family and the font files provided by the user agent or web server; if a font doesn't include the requested variants the browser will typically fall back to other glyphs or features offered by the font stack.

In modern usage font-variant often serves as a shorthand concept that maps to several more specific subproperties that target particular kinds of typographic behavior. These longhands let you control caps and small-caps behavior independently from ligatures or numeric glyph styles, so you can mix and match the exact typographic features you need. Examples of these longhand-style properties include font-variant-caps and font-variant-ligatures, which give finer-grained control over capitalization variants and which ligatures the renderer should form.

When authoring pages, it's useful to think of font-variant as a typographic tuning tool rather than a mechanism for choosing a different typeface. It interacts with lower-level OpenType feature controls such as font-feature-settings and with shorthand declarations like font (which sets family, size and other font characteristics) so authors can combine global font choices with precise variant selections. Keep in mind that the visual outcome depends on the font’s own support for the requested variants and on fallback behavior, and that enabling certain variants can improve typographic quality (for example better numeral alignment or stylistic alternates) but may also impact performance if the browser must synthesize glyphs or perform extra shaping work.

Definition

Initial value: normal
Applies to: All elements
Inherited: Yes
Computed value: See individual properties
Animatable: No
JavaScript syntax: object.style.fontVariant

Interactive Demo

font-variant: normal;

font-variant: no-common-ligatures proportional-nums;

font-variant: common-ligatures tabular-nums;

font-variant: small-caps slashed-zero;

Difficult waffles

3.14

2.71

Syntax

font-variant: normal | small-caps

Values

normalSelects a font that is not a small-caps font, usually the available normal font.
small-capsSelects a small-caps font. If no small caps variant is available, the browser generates a small caps approximation.
inherit

Example

HTML

<body>

  <main class="example">

    <h1>font-variant examples</h1>

    <p class="normal">Regular text: The quick brown fox jumps over 13 lazy dogs.</p>

    <p class="small-caps">Small caps: The quick brown fox jumps over 13 lazy dogs.</p>

    <p class="ordinal">Ordinal: 1st 2nd 3rd 4th 5th</p>

    <p class="tabular">Tabular numbers: 1234567890</p>

  </main>

</body>

CSS

/* Example showing the shorthand font-variant property */
.example {
  font-family: "Georgia", serif;
  margin: 2rem;
  line-height: 1.6;
}

h1 {
  font-size: 1.25rem;
  margin-bottom: 0.75rem;
}

.normal {
  font-variant: normal;
}

.small-caps {
  font-variant: small-caps;
  /* increase weight and size to show small-caps more clearly */
  font-size: 1rem;
  font-weight: 600;
}

.ordinal {
  /* turns ordinal indicators (like st, nd, rd) into superscripts where supported */
  font-variant: ordinal;
}

.tabular {
  /* requests tabular numbers (monospaced numerals) */
  font-variant: tabular-nums;
}

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS font-variant property. Hover over a browser icon to see the version that first introduced support for this CSS property.