# font-variant-numeric

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

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

Sets `font-variant-numeric`; `u.tabularNums()` covers the common
tabular-nums case and shares the same declaration. Each keyword names an
OpenType feature — a font that lacks it renders unchanged digits.

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

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

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

```ts
u.hover(u.fontVariantNumeric())
```

## Responsive design

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

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

## Signature

```ts
u.fontVariantNumeric(value?: FontVariantNumericValue)
```