Letter Spacing

Letter-spacing (also called "tracking" in design software) adjusts the uniform space between all characters in a text element. In CSS, the property is letter-spacing, measured in em units for responsive behavior or px for absolute values.

/* em units (recommended) — scales with font-size */
.heading { letter-spacing: -0.02em; }
.label   { letter-spacing: 0.08em;  }

/* px — absolute, doesn't scale */
.caption { letter-spacing: 0.5px; }

Tracking conventions by context:

Display and headline text (large sizes): Slightly negative tracking (-0.01em to -0.03em) optically compensates for the tendency of large letterforms to appear too spaced apart. This is why high-quality editorial sites tighten their hero headings.

.hero-title {
  font-size: clamp(3rem, 8vw, 6rem);
  letter-spacing: -0.025em;
}

Body text: Default tracking (0 or near-0). Avoid adjusting body text letter-spacing unless compensating for a specific typeface's idiosyncrasies.

Small text and captions: Slight positive tracking (0.01em to 0.03em) improves legibility at small sizes by preventing characters from crowding each other.

Uppercase labels and abbreviations: Positive tracking (0.05em to 0.15em) is essential when using all-caps text. Uppercase letters are designed to be used with word spaces; setting them without extra tracking produces dense, hard-to-read labels.

.label {
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.1em; /* Wide tracking for legibility */
  font-weight: 600;
}

Letter-spacing and font design:

Well-designed fonts have built-in spacing — the sidebearings on each glyph — that creates balanced letter-to-letter distance. letter-spacing adds a uniform value on top of (or instead of) this. This is why tracking adjustments should be conservative: you're working against the designer's carefully calibrated spacing.

Fonts with generous default spacing (Lato, Nunito) may need negative tracking at large sizes. Fonts with naturally tight spacing (Oswald) might need positive tracking even at body sizes.

An important CSS quirk:

letter-spacing adds space after each character, including the last one in a line. This can cause centered or right-aligned text to appear optically off-center. Compensating with negative text-indent equal to the letter-spacing value is a documented fix:

.centered-label {
  text-align: center;
  letter-spacing: 0.1em;
  text-indent: 0.1em; /* Compensate for trailing space */
}

Letter-spacing is distinct from kerning: kerning is the font's built-in per-pair spacing adjustment (the space between "VA" vs "VV"), while letter-spacing is applied uniformly by CSS on top of kerning.