How to change letter spacing
Short answer
letter-spacing adds space between letters:
<p style="letter-spacing: 0.2em; text-transform: uppercase; font-size: 14px;">Free shipping</p>
<p style="letter-spacing: -0.02em; font-size: 32px; font-weight: 700; margin: 0;">Big tight heading</p>A value in em scales with the font, so it moves between sizes more easily than pixels. A negative value squeezes the letters.
When it helps
Uppercase letters and small labels read better with a little extra spacing. Large bold headings, on the contrary, are often tightened slightly. Leave body text alone — the font is already designed for normal spacing.
Between words
word-spacing sets the space between words:
<p style="word-spacing: 12px;">Words with extra space</p>Common mistake
Do not spread letters with spaces ("S A L E"): a screen reader spells the word out letter by letter, and find-in-page cannot find it. Write the word normally and add letter-spacing.
Functions used in this recipe
- letter-spacing — Extra space between letters.
- word-spacing — Extra space between words.
- text-transform — Changes the case of letters on display.