font-variant
Turns on font variants, for example small caps or evenly spaced numerals.
- Initial value
normal- Inherited
- Yes
- Animatable
- no
- Applies to
- all elements
- JavaScript
element.style.fontVariant = "small-caps"
Example
#.scoreboard {
font-variant-numeric: tabular-nums;
}<table class="scoreboard stage" style="font-variant-numeric: tabular-nums;">
<tr><td>Ania</td><td style="text-align: right; padding-left: 24px;">1,240</td></tr>
<tr><td>Kuba</td><td style="text-align: right; padding-left: 24px;">980</td></tr>
<tr><td>Ola</td><td style="text-align: right; padding-left: 24px;">11,115</td></tr>
</table>Definition and usage
#The font-variant property is shorthand for several properties that control alternate characters in a font. Its best-known value is small-caps: lowercase letters replaced with smaller versions of the capitals.
Newer component properties, such as font-variant-numeric, let you turn on, for example, numerals with equal widths (tabular-nums). That keeps numbers in tables and counters from shifting as the value changes.
The effect depends on the font. If a font has no true small caps, the browser fakes them, and OpenType variants simply don’t turn on.
Syntax
#font-variant: normal | small-caps | <OpenType variants>;Values
#- The font’s regular characters.
- Small caps: lowercase letters as smaller capitals.
- Numerals with equal widths. Shown here with the number 1,234,567.
Values in practice
#normal
.demo { font-variant: normal; }small-caps
.demo { font-variant: small-caps; }tabular-nums
.demo { font-variant: tabular-nums; }Browser support
#Widely available
Works in all modern browsers, phones included. You can use it without worry.
- Chrome
- Edge
- Firefox
- Safari
Good practices
#- In rankings, price lists, and counters, turn on
font-variant-numeric: tabular-numsso columns of digits line up evenly. - Small caps work nicely for abbreviations, for example "NASA" within running text.
Related entries
#Spotted a mistake or missing an example? Write to us.