Font Variant Numeric

Use font-variant-numeric utilities to enable special numeric glyphs in fonts that support them. The utilities are composable — combine them to enable multiple variants at once.

---

Using ordinal glyphs

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

Style('ordinal ...', child: Text('1st'))

Using slashed zeroes

Use the slashed-zero utility to force a zero with a slash:

Style('slashed-zero ...', child: Text('0'))

Using lining figures

Use the lining-nums utility to use numeric glyphs aligned by their baseline:

Style('lining-nums ...', child: Text('1234567890'))

Using oldstyle figures

Use the oldstyle-nums utility to use numeric glyphs where some numbers have descenders:

Style('oldstyle-nums ...', child: Text('1234567890'))

Using proportional figures

Use the proportional-nums utility to use numeric glyphs that have proportional widths:

Style('proportional-nums ...', child: Text('12121'))
Style('proportional-nums ...', child: Text('90909'))

Using tabular figures

Use the tabular-nums utility to use numeric glyphs that have uniform/tabular widths:

Style('tabular-nums ...', child: Text('12121'))
Style('tabular-nums ...', child: Text('90909'))

Using diagonal fractions

Use the diagonal-fractions utility to replace numbers separated by a slash with diagonal fractions:

Style('diagonal-fractions ...', child: Text('1/2 3/4 5/6'))

Using stacked fractions

Use the stacked-fractions utility to replace numbers separated by a slash with stacked fractions:

Style('stacked-fractions ...', child: Text('1/2 3/4 5/6'))

Stacking multiple utilities

The utilities are composable so you can enable multiple variants by combining them:

Style('...', children: [
  Style('...', child: Text('Subtotal')),
  Style('text-right slashed-zero tabular-nums ...', child: Text('\$100.00')),
  Style('...', child: Text('Tax')),
  Style('text-right slashed-zero tabular-nums ...', child: Text('\$14.50')),
  Style('...', child: Text('Total')),
  Style('text-right slashed-zero tabular-nums ...', child: Text('\$114.50')),
])

Resetting numeric font variants

Use the normal-nums property to reset numeric font variants. The reset emits an empty fontFeatures list so it overrides any inherited values:

<p class="slashed-zero tabular-nums md:normal-nums ...">…</p>

Class reference

Class	OpenType Feature
normal-nums	reset (empty fontFeatures)
ordinal	ordn
slashed-zero	zero
lining-nums	lnum
oldstyle-nums	onum
proportional-nums	pnum
tabular-nums	tnum
diagonal-fractions	frac
stacked-fractions	afrc

Parity omissions

• slashed-zero — tailwindcss.com’s font-source demos are served by a legacy, non-variable “Source Sans Pro” font file whose slashed-zero glyph is a small dot inside the counter. This app (and its parity ref-renderer) bundle the current Source Sans 3 font instead, whose slashed-zero glyph is a full diagonal stroke across the whole counter — a genuine type-design change present in every Source Sans 3 release, not a rendering bug. Source Sans 3 is required so smcp and onum combine correctly elsewhere on this page (the legacy Source Sans Pro file silently drops onum under smcp), so the bundled font is not swapped back to match tailwindcss.com’s zero glyph.