# 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.

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

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.

## 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:

```tsx
<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.

```ts
u.hover(u.tabularNums())
```

## Responsive design

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

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

## Signature

```ts
u.tabularNums()
```