Font Variant Numeric

Control numeric font variants

Syntax

visual="[variant-value]"

Values

Value	CSS Output	Description
normal-nums	font-variant-numeric: normal	Normal numbers
ordinal	font-variant-numeric: ordinal	Ordinal markers
slashed-zero	font-variant-numeric: slashed-zero	Slashed zero
lining-nums	font-variant-numeric: lining-nums	Lining numbers
oldstyle-nums	font-variant-numeric: oldstyle-nums	Oldstyle numbers
proportional-nums	font-variant-numeric: proportional-nums	Proportional numbers
tabular-nums	font-variant-numeric: tabular-nums	Tabular numbers

Examples

<span visual="tabular-nums">123,456.00</span>

Preview

Font Variant Numeric

visual="tabular-nums" - Control number display

123,456.00

0123

1st 2nd 3rd

View Code

<div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
  <div space="p:small" visual="bg:primary text:white rounded:small tabular-nums text-size:big">123,456.00</div>
  <div space="p:small" visual="bg:success text:white rounded:small slashed-zero text-size:big">0123</div>
  <div space="p:small" visual="bg:warning text:black rounded:small ordinal text-size:big">1st 2nd 3rd</div>
</div>