Home / Snippets / Typography /
Tracking (letter-spacing)
A visual reference for letter-spacing values from tight display headings to loose uppercase labels.
Quick implementation
/* Tight — display headings */
.tracking-tight {
letter-spacing: -0.02em;
}
/* Normal — body text default */
.tracking-normal {
letter-spacing: 0;
}
/* Loose — relaxed body or subheadings */
.tracking-loose {
letter-spacing: 0.05em;
}
/* Very loose — labels, captions */
.tracking-xloose {
letter-spacing: 0.1em;
}
/* Uppercase tracking — allcaps labels */
.tracking-caps {
letter-spacing: 0.2em;
text-transform: uppercase;
font-size: 0.85em;
}Prompt this to your LLM
Includes role, constraints, two framework variants, and edge cases to handle.
You are a senior frontend engineer building a CSS typography design system.
Goal: A set of utility classes for letter-spacing (tracking) covering the full range from tight display headings to loose uppercase labels — no JavaScript.
Technical constraints:
- Use em units for letter-spacing so values scale with font-size.
- Provide at least 5 steps: tight (-0.02em), normal (0), loose (0.05em), very loose (0.1em), caps (0.2em).
- The caps class should pair letter-spacing: 0.2em with text-transform: uppercase and a slight font-size reduction.
- Use oklch() for any demo text colors, not hex or rgba().
- Do not use px values — em units keep tracking proportional at any type size.
Framework variant (pick one):
A) Vanilla CSS utility classes (.tracking-tight, .tracking-loose, etc.).
B) CSS custom property — define --tracking and set it with a modifier class; apply via letter-spacing: var(--tracking).
Edge cases to handle:
- Negative letter-spacing on uppercase text looks wrong — restrict .tracking-tight to lowercase/mixed text.
- Wide letter-spacing increases line length — warn in comments that line-length containers may need adjustment.
- letter-spacing applies after font kerning — do not use it as a substitute for font-kerning: none.
Return CSS only.Why this matters in 2026
Letter-spacing (called "tracking" in print typography) is one of the most misused CSS properties. Body text tightened too aggressively becomes illegible; display headings left at default tracking look loose and unpolished. Having a deliberate scale of tracking utilities prevents ad-hoc overrides and ensures typographic consistency across a design system.
The logic
Using em units for letter-spacing is critical — it keeps the tracking proportional to the font size. A heading at 3rem and a caption at 0.8rem with the same -0.02em class will both feel equally tight for their respective sizes. Pixel values would produce visually inconsistent results across type sizes.
The .tracking-caps class pairs 0.2em tracking with text-transform: uppercase — a classic typographic convention. Uppercase text set at normal tracking looks cramped; wide tracking opens it up to match the visual weight of the capitals. The slight font-size reduction (0.85em) compensates for the increased visual size that uppercase text occupies.
Accessibility & performance
Tight letter-spacing on body text (below -0.02em) can impair readability for users with dyslexia or low vision. Wide tracking on lowercase body text has a similar effect — it breaks the natural word-shape recognition that fluent readers rely on. These utilities are intentionally limited to the range where tracking aids rather than hinders readability. Letter-spacing is applied by the browser's text rendering engine with no performance cost.