[ @sdxc/u/typography ]

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.

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

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

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:

tracking("tight")

The quick brown fox jumps over the lazy dog.

tracking("normal")

The quick brown fox jumps over the lazy dog.

tracking("wide")

The quick brown fox jumps over the lazy dog.

tracking("widest")

The quick brown fox jumps over the lazy dog.

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

New in 2026

Faster builds, smaller bundles

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

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

Responsive design

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

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:

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

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

tracking("wide")

Signature

u.tracking(value?: TrackingValue)