What Is Tracking (Letter-Spacing) in Typography?

You copy a design from Figma into code, and the 72px hero headline looks loose and baggy compared with the mockup. Meanwhile, the small all-caps "NEW ARRIVALS" label above it looks cramped and hard to read. The fonts are the same, the sizes are the same, but the spacing between letters is off in both directions. The designer adjusted tracking in Figma and the value either never made it into the CSS or got translated in the wrong unit.

This article explains what tracking is, how it differs from kerning, how it maps to the CSS letter-spacing property, what values work for headings, body text, and all-caps, how to convert Figma's percentages into CSS, and how to keep your layout working when users override letter-spacing for accessibility.

What Is Tracking?

Tracking is the uniform adjustment of space between all characters in a range of text — a word, a line, a paragraph, or an entire element. Increasing tracking (positive values) spreads letters apart; decreasing it (negative values) pulls them together.

In CSS, tracking is the letter-spacing property. The default value, normal, uses the spacing the type designer built into the font.

Tracking is often confused with two related ideas:

Adjustment	What it changes	Applies to	CSS
Tracking	Space between all characters, uniformly	A range of text	letter-spacing
Kerning	Space between specific character pairs	Individual pairs	font-kerning
Word spacing	Space between words only	Word gaps	word-spacing

Kerning fixes pairs that look uneven; tracking changes the overall density. They stack: the browser applies the font's kerning first, then adds your tracking on top. For the pair-level story, see what kerning is and how it affects readability.

Why Tracking Matters

Type designers space their fonts for a particular range of sizes, usually body text. Outside that range, the built-in spacing stops looking right:

• At large sizes, the default space between letters scales up proportionally and starts to look too loose. Headlines often benefit from slightly negative tracking.
• At small sizes, letters can look crowded and start touching visually. Small text, captions, and UI labels often benefit from slightly positive tracking.
• In all-caps, capitals are designed to sit next to lowercase letters, not next to each other. Caps set at default spacing look tight and are harder to read, so they almost always want positive tracking.
• In heavy weights, thick strokes reduce the internal space of letters; a touch of extra tracking keeps bold small text legible.
• In light text on dark backgrounds, glyphs appear to bleed and spread, so slightly looser tracking helps.

Some fonts handle this automatically through optical sizing, adjusting spacing and shapes for each size. The optical sizing guide explains how that works with variable fonts.

Units for letter-spacing

letter-spacing accepts any CSS length. The unit you choose determines whether tracking stays correct when the font size changes.

.heading-em {
  letter-spacing: -0.02em; /* scales with font size: recommended */
}

.heading-px {
  letter-spacing: -1px; /* fixed: wrong at other sizes */
}

.heading-rem {
  letter-spacing: -0.05rem; /* tied to root size, not this element's size */
}

Use em. Tracking is a proportion of the font size. With em, a -0.02em headline stays proportionally the same whether it renders at 32px on a phone or 72px on a desktop. A px value that looks right at one size is too strong or too weak at another, which matters a lot with fluid typography using clamp().

Percentages are not valid for letter-spacing in CSS, even though design tools use them.

Recommended Tracking Values

There is no universal correct value because every font is spaced differently, but these ranges are a reliable starting point:

Text type	Typical size	Tracking
Display / hero headline	48px and up	-0.01em to -0.03em
Section headings (H2–H3)	24–40px	-0.005em to -0.015em
Body text	16–20px	normal (0)
Small text, captions, footnotes	12–14px	0.01em to 0.02em
All-caps labels, eyebrows, buttons	11–16px	0.05em to 0.12em
All-caps headings	24px and up	0.02em to 0.06em
Light text on dark backgrounds	Any	Add about 0.01em

Leave body text at normal unless you have a specific reason. The designer of a good text face spent months tuning that spacing; tightening it to "look modern" usually hurts readability.

Converting Figma and Design Tool Values

Design tools express tracking differently, which is the most common source of handoff bugs.

Figma

Figma shows letter-spacing as a percentage of the font size. To convert to CSS em, divide by 100:

Figma value	CSS value
-2%	-0.02em
0%	normal
5%	0.05em
10%	0.1em

If someone has set Figma's letter-spacing in pixels, convert by dividing the pixel value by the font size: -1.44px at 72px is -0.02em.

Adobe Apps

Photoshop, Illustrator, and InDesign use thousandths of an em. A tracking value of 50 means 50/1000 em:

Adobe value	CSS value
-20	-0.02em
25	0.025em
100	0.1em

Formula: css_em = adobe_value / 1000.

Implementing Tracking in CSS

A practical tracking system ties letter-spacing to the role of the text, not to individual components:

:root {
  --tracking-tighter: -0.03em;
  --tracking-tight: -0.015em;
  --tracking-normal: 0em;
  --tracking-wide: 0.02em;
  --tracking-wider: 0.06em;
  --tracking-caps: 0.1em;
}

h1 {
  font-size: clamp(2.5rem, 1.6rem + 4vw, 4.5rem);
  letter-spacing: var(--tracking-tighter);
  line-height: 1.05;
}

h2 {
  letter-spacing: var(--tracking-tight);
}

body {
  letter-spacing: var(--tracking-normal);
}

small,
.caption {
  font-size: 0.8125rem;
  letter-spacing: var(--tracking-wide);
}

.eyebrow {
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
}

Size-Dependent Tracking with clamp()

For fluid headlines, you can make tracking tighten as size grows by combining clamp() with viewport units. Because letter-spacing resolves to a length, you can mix em and vw:

.hero-title {
  font-size: clamp(2.5rem, 1.5rem + 5vw, 5rem);
  letter-spacing: clamp(-0.035em, -0.01em - 0.15vw, -0.01em);
}

At small widths the tracking stays near -0.01em; at wide desktop widths it approaches -0.035em.

The Trailing Space Problem

letter-spacing adds space after every character, including the last one. On centred or right-aligned text, especially buttons and widely tracked caps, this pushes the text visually off-centre. Two fixes:

/* Option 1: compensate with negative margin on the element */
.button-caps {
  letter-spacing: 0.1em;
  margin-inline-end: -0.1em;
}

/* Option 2: compensate with padding on the container */
.button {
  padding-inline: 1.5em calc(1.5em - 0.1em);
}

The CSS Text Level 4 spec allows browsers to trim spacing at line ends, but behaviour still varies, so the manual fix remains the reliable choice.

Tracking and Ligatures

When letter-spacing is non-zero, browsers turn off optional ligatures like fi and fl, because those combined glyphs cannot be spread apart. Required ligatures in scripts like Arabic stay intact. This is another reason not to track body text: you lose the font's ligatures and its intended texture.

Do Not Track Connected Scripts

Arabic, Devanagari, Bengali, and other connected or joining scripts should not be tracked, because spacing breaks the connections between characters. Scope tracking to Latin text, or reset it by language:

:lang(ar),
:lang(hi),
:lang(bn) {
  letter-spacing: normal;
}

Tracking in Tailwind CSS v4

Tailwind's tracking-* utilities map to --tracking-* theme variables. You can redefine or extend them with @theme:

@import "tailwindcss";

@theme {
  --tracking-tighter: -0.03em;
  --tracking-tight: -0.015em;
  --tracking-wide: 0.02em;
  --tracking-caps: 0.1em;
}

<p class="text-xs font-semibold uppercase tracking-caps">New arrivals</p>
<h1 class="text-6xl font-bold tracking-tighter">Built for the long haul</h1>

Tailwind also supports arbitrary values when you need a one-off: tracking-[-0.025em].

Accessibility: WCAG 1.4.12 Text Spacing

WCAG 2.2 Success Criterion 1.4.12 (Text Spacing, Level AA) requires that no content or functionality is lost when a user overrides text spacing to at least:

• Line height: 1.5 times the font size
• Spacing after paragraphs: 2 times the font size
• Letter spacing: 0.12 times the font size
• Word spacing: 0.16 times the font size

Users apply these through browser extensions or user stylesheets, typically because wider spacing helps with dyslexia or low vision. Your job is not to set these values yourself, but to make sure your layout survives them.

Common failures when letter-spacing is increased to 0.12em:

• Buttons with fixed widths where the label overflows or is clipped.
• Navigation items that wrap and overlap other content.
• Text in containers with overflow: hidden and fixed heights.
• Labels truncated with text-overflow: ellipsis hiding essential information.

Test with a bookmarklet or by injecting this CSS in DevTools:

* {
  line-height: 1.5 !important;
  letter-spacing: 0.12em !important;
  word-spacing: 0.16em !important;
}

p {
  margin-bottom: 2em !important;
}

If nothing is cut off or overlapping, you pass. Use min-width and min-height instead of fixed sizes, let containers grow, and avoid clipping text.

Also be careful in the other direction: aggressively negative tracking on body text makes letters collide and is harder for many readers. Keep negative values for large display text.

Common Tracking Mistakes

1. Tracking body text tighter "for a modern look." It reduces legibility and disables ligatures. Leave body text at normal.
2. All-caps with default spacing. Caps need air. Add 0.05–0.12em.
3. Lowercase with wide tracking. Widely spaced lowercase breaks word shapes and looks amateurish. Wide tracking is for caps and small caps.
4. Pixel values that do not scale. Use em so tracking stays proportional across breakpoints.
5. Forgetting the trailing space on centred, tracked buttons.
6. Copying Figma percentages literally. letter-spacing: 5% is invalid CSS; convert to 0.05em.
7. Tracking connected scripts, which breaks joining.

Tracking FAQ

Conclusion

Tracking is the uniform adjustment of space between characters, implemented in CSS as letter-spacing. Fonts are spaced for body sizes, so tracking is how you adapt them to other contexts: slightly tighter for large headlines, slightly looser for small text and light-on-dark, and noticeably looser for all-caps. Leave body text at normal and use tracking intentionally where size, case, or weight change.

Always express tracking in em so it scales, convert design tool values carefully, compensate for the trailing space on centred labels, and do not track connected scripts. Finally, build layouts that survive users increasing letter-spacing to 0.12em under WCAG 1.4.12 — flexible containers and no clipped text are what make tracking accessible.

Here are some useful references for going deeper on tracking and letter-spacing:

1. MDN Web Docs: letter-spacing — syntax, units, and accessibility notes.
2. W3C: Understanding SC 1.4.12 Text Spacing — the exact override values your layout must support.
3. Butterick's Practical Typography: Letterspacing — when to add tracking and when to leave it alone.
4. Tailwind CSS Docs: letter-spacing — the tracking-* utilities and theme variables.
5. Google Fonts Knowledge: Glossary — definitions of tracking, kerning, and spacing.