font-variant

font-variant is a shorthand for typographic variant features, including caps, ligatures, numeric figures, alternates, East Asian forms, positions, and emoji presentation. Available results depend on both the browser and the chosen font.

Request small caps

The letters stay mixed case in the HTML. Small-caps requests small-cap glyphs for lowercase letters; the browser may synthesize them if the font lacks the feature.

<p>Workshop notes</p>
<p class="caps">Workshop notes</p>

p {
  font-family: Georgia, serif;
  font-size: 1.25rem;
}
.caps {
  font-variant: small-caps;
}

Align numeric columns with tabular figures

Tabular-nums requests equal-width digit glyphs. Right alignment also aligns the cell edges. If the selected system font lacks the feature, the font may show no difference; inspect another installed supporting font.

<table>
  <caption>
    Practice totals
  </caption>
  <thead>
    <tr>
      <th scope="col">Session</th>
      <th scope="col">Count</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Morning</th>
      <td>111</td>
    </tr>
    <tr>
      <th scope="row">Afternoon</th>
      <td>888</td>
    </tr>
  </tbody>
</table>

table {
  font-family: system-ui, sans-serif;
  border-collapse: collapse;
}
th,
td {
  padding: 0.5rem;
  border: 1px solid #94a3b8;
}
td {
  font-variant: tabular-nums;
  text-align: right;
}

Values and inheritance

The shorthand’s initial value is normal, and its constituents are inherited. Normal resets features to their initial settings. None specifically disables ligatures and resets other variant settings. Compatible feature keywords can be combined; conflicting choices in the same group are invalid.

Small-caps, all-small-caps, tabular-nums, lining-nums, and oldstyle-nums have different purposes. Stylistic alternates may require named @font-feature-values definitions and corresponding features in the font. Check individual feature support rather than treating every keyword as equally available.

Common mistakes

Small caps do not change the source text into uppercase. That differs from text-transform. A font-variant shorthand can reset other variant settings, and the broader font shorthand has only a restricted variant position while resetting the rest.

Use variants for a typographic need rather than assuming decoration improves readability. Learn font-family and table for the practical example’s prerequisites.

Sources and browser support

MDN: font-variant describes the syntax and links to the specification and compatibility data. Check individual values in that table when supporting older browsers.