Encodera

Thanks for reading!

Donate to the site — we work hard for you.

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

Thanks for reading!

Donate to the site — we work hard for you.