[ @sdxc/u/typography ]

font-variant-numeric

Sets font-variant-numeric; u.tabularNums() covers the common tabular-nums case and shares the same declaration.

View as Markdown Open in GitHub Open in ChatGPT Open in Claude

import { fontVariantNumeric } from "@sdxc/u/typography";

Quick reference

Every documented call, beside the CSS it emits.

Call	CSS
`u.fontVariantNumeric()`	`css({ fontVariantNumeric: "tabular-nums" })`
`u.fontVariantNumeric("slashed-zero")`	`css({ fontVariantNumeric: "slashed-zero" })`
`u.fontVariantNumeric("tabular-nums slashed-zero")`	`css({ fontVariantNumeric: "tabular-nums slashed-zero" })`

Examples

Basic example

Use fontVariantNumeric(value) to pick how a font draws its digits; with no value it uses "tabular-nums", which lines figures up in columns:

fontVariantNumeric()

1:11.111

1:08.808

1:14.441

fontVariantNumeric("proportional-nums")

1:11.111

1:08.808

1:14.441

<div mix={[grid(), gridTemplate({ columns: "auto auto" }), gap(12)]}>
	<div mix={[textAlign("end")]}>
		<p mix={[...]}>fontVariantNumeric()</p>
		<p mix={[fontVariantNumeric()]}>1:11.111</p>
		<p mix={[fontVariantNumeric()]}>1:08.808</p>
		<p mix={[fontVariantNumeric()]}>1:14.441</p>
	</div>
	<div mix={[textAlign("end")]}>
		<p mix={[...]}>fontVariantNumeric("proportional-nums")</p>
		<p mix={[fontVariantNumeric("proportional-nums")]}>1:11.111</p>
		<p mix={[fontVariantNumeric("proportional-nums")]}>1:08.808</p>
		<p mix={[fontVariantNumeric("proportional-nums")]}>1:14.441</p>
	</div>
</div>

Fractions

Use fontVariantNumeric("diagonal-fractions") to draw 3/4 as a fraction, where the font supports it:

fontVariantNumeric("diagonal-fractions")

Add 3/4 cup sugar and 1/2 cup milk

default digits

Add 3/4 cup sugar and 1/2 cup milk

<div mix={[...]}>
	<div>
		<p mix={[...]}>fontVariantNumeric("diagonal-fractions")</p>
		<p mix={[fontVariantNumeric("diagonal-fractions"), text("2xl")]}>
			Add 3/4 cup sugar and 1/2 cup milk
		</p>
	</div>
	<div>
		<p mix={[...]}>default digits</p>
		<p mix={[text("2xl")]}>Add 3/4 cup sugar and 1/2 cup milk</p>
	</div>
</div>

Applying on a state

Wrap the call in a state utility to scope it to one selector.

u.hover(u.fontVariantNumeric())

Responsive design

Wrap the call in a container query to scope it to one width.

u.at("md", u.fontVariantNumeric())

Signature

u.fontVariantNumeric(value?: FontVariantNumericValue)