[ @sdxc/u/typography ]

font-variant-numeric

Applies font-variant-numeric: tabular-nums, so digits render at a fixed width instead of their proportional metrics — a running total, countdown, or one-time-code field reads without its layout shifting as digits change.

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

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

Quick reference

Every documented call, beside the CSS it emits.

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

Examples

Basic example

Use tabularNums() to draw every digit at the same width, so columns of numbers line up and a changing total keeps still:

tabularNums()

$1,111.11

$888.88

$10,407.19

default digits

$1,111.11

$888.88

$10,407.19

<div mix={[grid(), gridTemplate({ columns: "auto auto" }), gap(12)]}>
	<div mix={[textAlign("end")]}>
		<p mix={[...]}>tabularNums()</p>
		<p mix={[tabularNums()]}>$1,111.11</p>
		<p mix={[tabularNums()]}>$888.88</p>
		<p mix={[tabularNums()]}>$10,407.19</p>
	</div>
	<div mix={[textAlign("end")]}>
		<p mix={[...]}>default digits</p>
		<p>$1,111.11</p>
		<p>$888.88</p>
		<p>$10,407.19</p>
	</div>
</div>

Applying on a state

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

u.hover(u.tabularNums())

Responsive design

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

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

Signature

u.tabularNums()