Font Variant Numeric

Basic usage

Applying numeric variants

Use the font-variant-numeric utilities to enable additional glyphs for numbers, fractions, and ordinal markers (in fonts that support them).

These utilities are composable so you can enable multiple font-variant-numeric features by combining multiple classNamees in your HTML:

<p className="**ordinal slashed-zero tabular-nums** ...">
  1234567890
</p>

Note that many fonts don't support these features (stacked fractions support for example is especially rare), so some of these utilities may have no effect depending on the font family you are using.

-- block

Ordinal

Use the ordinal utility to enable special glyphs for the ordinal markers.

-- column

<p className="**ordinal** ...">1st</p>

-- /block

-- block

Slashed Zero

Use the slashed-zero utility to force a 0 with a slash; this is useful when a clear distinction between O and 0 is needed.

-- column

<p className="**slashed-zero** ...">0</p>

-- /block

-- block

Lining figures

Use the lining-nums utility to use the numeric glyphs that are all aligned by their baseline. This corresponds to the lnum OpenType feature. This is the default for most fonts.

-- column

<p className="**lining-nums** ...">
  1234567890
</p>

-- /block

-- block

Oldstyle figures

Use the oldstyle-nums utility to use numeric glyphs where some numbers have descenders. This corresponds to the onum OpenType feature.

-- column

<p className="**oldstyle-nums** ...">
  1234567890
</p>

-- /block

-- block

Proportional figures

Use the proportional-nums utility to use numeric glyphs that have proportional widths (rather than uniform/tabular). This corresponds to the pnum OpenType feature.

-- column

<p className="**proportional-nums** ...">
  12121
</p>
<p className="**proportional-nums** ...">
  90909
</p>

-- /block

-- block

Tabular figures

Use the tabular-nums utility to use numeric glyphs that have uniform/tabular widths (rather than proportional). This corresponds to the tnum OpenType feature.

-- column

<p className="**tabular-nums** ...">
  12121
</p>
<p className="**tabular-nums** ...">
  90909
</p>

-- /block

-- block

Diagonal fractions

Use the diagonal-fractions utility to replace numbers separated by a slash with common diagonal fractions. This corresponds to the frac OpenType feature.

-- column

<p className="**diagonal-fractions** ...">
  1/2 3/4 5/6
</p>

-- /block

-- block

Stacked fractions

Use the stacked-fractions utility to replace numbers separated by a slash with common stacked fractions. This corresponds to the frac OpenType feature. Very few fonts seem to support this feature — we've used Ubuntu Mono here.

-- column

<p className="**stacked-fractions** ...">
  1/2 3/4 5/6
</p>

-- /block

Resetting numeric font variants

Use the normal-nums propery to reset numeric font variants. This is usually useful for resetting a font feature at a particular breakpoint:

<p className="slashed-zero tabular-nums **md:normal-nums** ...">
  12345
</p>