# letter-spacing

> Applies `letter-spacing` from the named tracking scale, resolving through `var(--ui-tracking-{name}, fallback)` so the scale works before an app defines the variable; any other string is treated as a raw `letter-spacing` value.

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

Applies `letter-spacing` from the named tracking scale, resolving through
`var(--ui-tracking-{name}, fallback)` so the scale works before an app defines
the variable; any other string is treated as a raw `letter-spacing` value.

## Quick reference

Every documented call, beside the CSS it emits.

| Call | CSS |
| --- | --- |
| `u.tracking("wide")` | `css({ letterSpacing: "var(--ui-tracking-wide, 0.025em)" })` |
| `u.tracking("0.18em")` | `css({ letterSpacing: "0.18em" })` |

## Examples

### Basic example

Use `tracking(name)` with a step of the tracking scale, like `tracking("tight")` or `tracking("wide")`, to set the letter spacing of an element:

```tsx
<div mix={[...]}>
	<div>
		<p mix={[...]}>tracking("tight")</p>
		<p mix={[tracking("tight"), text("xl")]}>The quick brown fox jumps over the lazy dog.</p>
	</div>
	<div>
		<p mix={[...]}>tracking("normal")</p>
		<p mix={[tracking("normal"), text("xl")]}>The quick brown fox jumps over the lazy dog.</p>
	</div>
	<div>
		<p mix={[...]}>tracking("wide")</p>
		<p mix={[tracking("wide"), text("xl")]}>The quick brown fox jumps over the lazy dog.</p>
	</div>
	<div>
		<p mix={[...]}>tracking("widest")</p>
		<p mix={[tracking("widest"), text("xl")]}>The quick brown fox jumps over the lazy dog.</p>
	</div>
</div>
```

### Custom values

Pass any `letter-spacing` value, like `tracking("0.18em")`, for spacing the scale does not cover:

```tsx
<div>
	<p
		mix={[
			tracking("0.18em"),
			textTransform("uppercase"),
			text("xs"),
			weight("semibold"),
			fg("brand"),
		]}
	>
		New in 2026
	</p>
	<h3 mix={[tracking("tighter"), text("4xl"), weight("bold")]}>
		Faster builds, smaller bundles
	</h3>
</div>
```

## Applying on a state

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

```ts
u.hover(u.tracking("wide"))
```

## Responsive design

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

```ts
u.at("md", u.tracking("wide"))
```

## Customizing your theme

### Customizing letter spacing

Each named letter spacing reads a `--ui-tracking-*` variable before its built-in value, so a theme retunes one by declaring it:

```css
:root {
	--ui-tracking-wide: 0.04em;
}
```

Every call that names the step now reads the new value:

```ts
tracking("wide")
```

## Signature

```ts
u.tracking(value?: TrackingValue)
```