트래킹 (Tracking)

Tracking is the uniform adjustment of space between all characters across a range of text. Unlike kerning — which adjusts specific letter pairs — tracking applies identically to every character, expanding or compressing the overall texture of text as a whole. In CSS, tracking is controlled by the letter-spacing property.

The relationship between size and tracking is one of typography's most important principles. As text gets larger, the visual space between letters needs to decrease (negative tracking) to maintain comfortable density. As text gets smaller, space needs to increase (positive tracking) to preserve legibility. This inverse relationship between size and optimal tracking is why typefaces that look perfectly spaced as headlines feel uncomfortably tight when used at caption sizes.

/* Tracking adjustments based on size — a key principle */

/* Large display text: tighten tracking */
h1 {
  font-size: 4rem;
  letter-spacing: -0.03em; /* Em units scale proportionally with font-size */
}

h2 {
  font-size: 2rem;
  letter-spacing: -0.01em;
}

/* Body text: trust the font's default */
p {
  font-size: 1rem;
  letter-spacing: 0; /* Or omit entirely */
}

/* Small text: open up the spacing */
.caption {
  font-size: 0.75rem;
  letter-spacing: 0.02em;
}

/* Uppercase text always needs positive tracking */
.label {
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.1em; /* Uppercase at small sizes needs significant tracking */
  font-weight: 600;
}

The reason uppercase text requires positive tracking is that capital letters are designed to flow between lowercase letters — they're optically calibrated for mixed-case text. In all-caps settings, removing the lowercase forms leaves the capitals crowded against each other. Adding 0.05–0.15em of tracking restores visual rhythm.

Using em units for letter-spacing is considered best practice because the values scale proportionally with font-size. If you use pixel values, you'll need to recalculate at every breakpoint. Em-based tracking means your proportional relationships hold as text scales.

Typefaces like Inter and Source Sans 3 ship with carefully calibrated default spacing that works without adjustment at typical sizes, but even these benefit from tracking refinements at extreme sizes. On Google Fonts, trying size variants in the specimen view before committing to tracking values is a good workflow.