What letter-spacing actually does
Letter-spacing, also called tracking, is the uniform space added between every glyph in a run of text. CSS expresses it in em or pixel units relative to the font-size. A value of 0.05em on a 16-pixel font adds 0.8 pixels between each character. Tracking is different from kerning, which adjusts pairs of letters individually based on their shapes.
Web fonts ship with built-in spacing the designer chose. CSS letter-spacing overrides that. The right value depends on the size, the weight, and the use case. Tight tracking is right for display headlines. Loose tracking is right for small uppercase labels and subheadings. Body text is usually best at zero.
The heavier-and-larger-gets-tighter rule
Professional typographers follow one rule above all others: as size and weight increase, tracking should decrease, often into negative values. A 64-pixel headline at 800 weight should sit at roughly minus 0.02em. A 14-pixel uppercase label at 600 weight should sit at plus 0.08em. The difference is large enough that the same brand font can look amateurish at large sizes if it inherits the default tracking from the body.
Why this works comes from the perceptual physics of reading. Big bold letters already touch visually because their forms are heavy and adjacent strokes nearly merge. Pulling them tighter is the natural compensation. Small letters at low weight have too much air between strokes; opening up the tracking gives the eye footholds for each glyph.
Common Use Cases
Editorial designers building landing pages use the Optimizer to dial in the hero headline at minus 0.03em while the body sits at zero. Brand designers shipping a token library use it to generate a spacing scale that varies with both weight and size. Email designers use it to make small uppercase preheaders feel airy without sliding into novelty territory.
Internationalization teams check the recommended values against their non-Latin scripts because tracking math varies by writing system. Latin and Greek follow similar rules; Arabic and Indic scripts often need less tracking adjustment because their glyph forms are already optimized differently.
How We Compare
Most tracking calculators online output a single value for the whole page, which misses the point. The Optimizer here generates a matrix: every size and weight pair gets a tailored value. Plug it into your design tokens and the entire site benefits.
Compared to manually tracking in Figma or Sketch and then translating the values to CSS, the Optimizer encodes the rule into the math so the values match what experienced type designers would have chosen. You can override any cell, but the defaults are professional grade.
Frequently Asked Questions
Should body text have letter-spacing applied?
Usually zero, which is the font designer original intent. Body text sized between 14 and 18 pixels at weight 400 reads best at the spacing that ships with the font. Adding even small positive tracking makes the text feel airy and unfocused; adding negative tracking makes it feel cramped. The exception is when your fallback font has noticeably different default tracking than your primary, in which case a small adjustment closes the gap.
What is the difference between letter-spacing and word-spacing?
letter-spacing affects the gap between every adjacent character. word-spacing affects only the gaps between words, where the space character lives. They are independent CSS properties. For body text, word-spacing is rarely touched. For justified text or for typesetting effects, word-spacing can be tuned alongside letter-spacing to control the overall density of the page.
Why do bold headlines need negative tracking?
Bold weight thickens every glyph stroke, so adjacent letters touch visually even at standard spacing. Negative tracking pulls them slightly closer to compensate, restoring the relationship between counter-space inside letters and the space between letters. A 72-pixel headline at weight 900 might benefit from minus 0.03em or even minus 0.05em depending on the font.
Is there a rule for uppercase versus mixed case?
Yes. Uppercase always wants more tracking than mixed case. Capital letters are visually denser and need more breathing room between them for the eye to read them as separate forms. A common starting point is plus 0.05em for uppercase at body size, scaling up to plus 0.12em for very small uppercase labels. Mixed case at the same size usually wants zero.
Should I use em or pixel units?
Em, always. Tracking expressed in em scales proportionally with font-size, which is what professional typography expects. A heading at 32 pixels and the same heading scaled to 48 pixels should have the same visual tightness, and that only happens if tracking is in em. Pixel tracking values that look right at one size look wrong at any other.
Does tracking interpolate across the weight axis on variable fonts?
Yes. Variable fonts have a continuous weight axis, and the Optimizer interpolates the recommended tracking smoothly. If you set font-variation-settings to wght 550 instead of the snap value 600, the Optimizer can give you a tracking value that matches that exact weight rather than rounding to the nearest 100-step bucket.
Can I use letter-spacing to fix kerning problems?
No, and trying to is a common mistake. Kerning is per-pair adjustment for specific letter combinations like AV or To. Letter-spacing is uniform spacing applied to every pair equally. If a specific pair looks wrong, the fix is to enable proper kerning with font-feature-settings: kern, or to pick a font with better metrics. Universal letter-spacing makes every pair wider or narrower; it cannot target one bad combination.
What about screen readers and accessibility?
Modern screen readers ignore CSS letter-spacing entirely, so values you set do not affect speech. WCAG 2.1 success criterion 1.4.12 requires that user agents support overriding letter-spacing up to 0.12em without content loss. Your tracking values should not be so tight that adding 0.12em on top would break the layout. The Optimizer outputs values comfortably within that range.