Tracking

Classes

Tight keys already contain negative lengths; use tracking-tight directly. A signed token form such as -tracking-tight is not supported.

Values

The nonzero preset values use em, relative to the font size where letter-spacing is declared. tracking-normal supplies zero; use (letter-spacing:normal) for the native keyword.

Inherited spacing keeps its computed length

tracking-widest supplies .12em. At a 16px font size it computes to 1.92px. A child with a 32px font inherits that length; it does not automatically double the spacing.

Both children have the same font and size. The inherited letter-spacing length stays 1.92px; reapplying the class evaluates .12em at the child’s 32px font size.

Text description

1. The parent uses font-md and tracking-widest. With a 16px root font size, its .12em tracking computes to a 1.92px length.
2. Both child samples use font-3xl, or 32px, and the same word and font.
3. The first child inherits the computed 1.92px letter spacing. The second reapplies tracking-widest, so .12em computes against 32px and becomes 3.84px.
4. The second text box is wider even though the glyph size is unchanged. The colored guides show layout widths, not glyph-ink bounds or borders emitted by tracking.

Apply tracking-widest on the child to evaluate .12em against its own 32px font size, producing 3.84px. This differs from the unitless ratios used by Leading.

Letter spacing adjusts the spacing of text rather than stretching the glyph shapes. It can change line wrapping; keep the container free to grow and inspect the actual font and language.

A text-* treatment includes a letter-spacing declaration. On the same element and under the same conditions, a tracking-* utility follows that recipe and can override its spacing. For a literal length, use a native declaration such as (letter-spacing:-.03em).

See Leading and Text treatment companions and native tracking behavior.

Usage

Compare the same phrase at one font size with two tracking values.

<div>  <p class="… font-lg tracking-tight">Letter spacing shapes this line.</p>  <p class="… font-lg tracking-widest">Letter spacing shapes this line.</p></div>

@layer theme {  :root,  :host {    --tracking-tight: -.02em;    --tracking-widest: .12em;    --font-size-lg: 1.125rem  }}@layer utilities {  .font-lg {    font-size: var(--font-size-lg)  }  .tracking-tight {    letter-spacing: var(--tracking-tight)  }  .tracking-widest {    letter-spacing: var(--tracking-widest)  }}

Customize

Change a preset value or add a token: --tracking-display creates tracking-display.

@theme {  --tracking-tight: -.03em;  --tracking-display: -.05em;}

@layer theme {  :root,  :host {    --tracking-display: -.05em  }}@layer utilities {  .tracking-display {    letter-spacing: var(--tracking-display)  }}

See theme directives and Typography.