letter-spacing & word-spacing (tracking)

When to add it, when to remove it

h1 { letter-spacing: -0.02em; }    /* TIGHTEN large headings */
.eyebrow { letter-spacing: 0.08em; text-transform: uppercase; }   /* loosen ALL CAPS */

Two rules:

1. Tighten large headings (negative letter-spacing). Display fonts space-out at large sizes; -0.02em to -0.04em snaps them back.
2. Loosen ALL CAPS labels (positive letter-spacing). Uppercase characters are spaced for readability at body size; for an "EYEBROW" label or button text in caps, 0.05em to 0.10em reads better.

Use em, not px

h1 { letter-spacing: -0.02em; }       /* scales with font-size */

If you set -1px, a 16px heading gets the same tightening as a 64px heading — way too aggressive at the small size. em is proportional, always correct.

word-spacing

.relaxed { word-spacing: 0.2em; }

Less commonly useful. Justified text occasionally needs it. Body paragraphs almost never do.

When NOT to touch them

Default letter-spacing in modern fonts is already tuned by the type designer. For body text at 16px, leave letter-spacing: normal. Only adjust for displays (big) or ALL CAPS labels (loosen).