Tracking (also called letter-spacing) is the uniform adjustment of space between all characters across a range of text. Unlike kerning, which adjusts the space between specific character pairs to fix optical imbalances, tracking increases or decreases spacing for every character in a text run by the same amount. It is used to control the overall density and texture of text, and is one of the most impactful tools in display typography.
CSS letter-spacing
In CSS, tracking is implemented through the letter-spacing property:
/* No tracking (default) */
.normal { letter-spacing: 0; }
/* Positive tracking -- opens up text */
.open { letter-spacing: 0.05em; }
/* Tight tracking -- closes in text */
.tight { letter-spacing: -0.02em; }
/* Wide tracking -- common in display headings */
.display-wide {
letter-spacing: 0.15em;
text-transform: uppercase;
}
/* Pixel values (not recommended -- does not scale with font size) */
.fixed { letter-spacing: 2px; }
Em Units for Tracking
Using em units for letter-spacing is strongly recommended over absolute units. em values scale proportionally with the font size, so the visual relationship is preserved when font size changes:
/* Scales with font size: 0.1em at 16px = 1.6px gap
same 0.1em at 32px = 3.2px gap -- proportional */
.scalable { letter-spacing: 0.1em; }
/* Does NOT scale: always 2px regardless of font size */
.fixed { letter-spacing: 2px; }
Tracking and Kerning Interaction
When letter-spacing is applied, kerning often should be disabled. Tracking adds uniform space after every glyph, including in pairs where kerning has already tightened the space. The result can be that kerned pairs appear more open than unkerned pairs:
/* Best practice for tracked display text */
.tracked-heading {
letter-spacing: 0.2em;
font-kerning: none; /* disable pair kerning */
font-feature-settings: 'kern' 0;
text-transform: uppercase;
}
Typographic Conventions
Uppercase text almost always benefits from positive tracking. All-caps text without tracking looks cramped because capital letters are designed to follow lowercase letters, which have more visual openness:
/* Good: uppercase with tracking */
.label {
text-transform: uppercase;
letter-spacing: 0.1em;
font-size: 0.75rem;
}
Large display headings at sizes above 40-60px often benefit from negative tracking -- at large sizes, the natural inter-character spacing appears exaggerated:
.hero-heading {
font-size: clamp(3rem, 8vw, 7rem);
letter-spacing: -0.03em;
line-height: 1.05;
}
Small text for body copy is sometimes tightened very slightly (negative tracking) to improve texture at small sizes:
/* Very subtle tightening for dense body text */
.dense-body {
letter-spacing: -0.01em;
font-size: 0.875rem;
}
Programmatic Tracking Adjustment
// Scale tracking with font size (for fluid typography)
function getTracking(fontSize) {
if (fontSize < 14) return '0.02em';
if (fontSize < 20) return '0em';
if (fontSize < 40) return '-0.01em';
return '-0.03em';
}
// Apply tracking adjustments based on computed font size
document.querySelectorAll('h1, h2').forEach(el => {
const size = parseFloat(getComputedStyle(el).fontSize);
el.style.letterSpacing = getTracking(size);
});
Tracking in SVG
<!-- SVG letter-spacing attribute -->
<text letter-spacing="2">Tracked SVG text</text>
<!-- CSS approach in SVG (preferred) -->
<text style="letter-spacing: 0.1em">Tracked SVG text</text>
<!-- Character-level control with dx attribute -->
<text>
<tspan>H</tspan><tspan dx="4">e</tspan><tspan dx="4">l</tspan>
</text>
Accessibility Note
Extreme negative tracking can significantly harm readability for users with dyslexia or low vision. The WCAG guidelines do not set specific limits on letter-spacing, but excessive tightening -- particularly in body text -- can make text effectively unreadable. Consider prefers-reduced-motion and user font size preferences when applying strong tracking adjustments.