The same word in uppercase looks more cramped than in lowercase, because capital letters, being squarer, leave less white space between them. Typographers have corrected this effect forever by slightly spreading the letters apart. CSS offers exactly that control with two sibling properties, letter-spacing and word-spacing.
The first acts between letters, the second between words. Both look harmless enough, but overusing either turns a comfortable text into a string of words the eye struggles to connect.
Definition
letter-spacing adds (or removes) a fixed space between each character of a text. word-spacing does the same thing, but only between words, by acting on the width of the spaces that separate them.
.label {
letter-spacing: 0.08em;
}
.airy-text {
word-spacing: 0.3em;
}Both properties accept a value in pixels, but the em unit is generally preferred, because it is computed relative to the element's font-size: the spacing stays proportional even if text size changes elsewhere on the site.
| Value | Effect |
|---|---|
normal | The font's default spacing, the initial value |
Positive value, e.g. 0.05em | Spreads characters or words apart |
Negative value, e.g. -0.02em | Pulls characters or words closer |
The typical use: uppercase labels
The most common pairing combines text-transform and letter-spacing: a short label switched to uppercase, with a slight gap between letters to offset their visual density and produce a more airy, almost printed look.
.badge {
text-transform: uppercase;
letter-spacing: 0.08em;
font-size: 0.75rem;
}That setting is what gives small status badges, subtle buttons, or navigation labels the crisp, spaced-out look found across most modern interfaces, very different from uppercase text left with no spacing adjustment at all.
The trap on long text
What works perfectly on three uppercase words becomes a problem across an entire paragraph. A letter gap designed for a short label, applied by mistake or by habit to a block of body copy, noticeably slows down reading: the eye has to travel further to recognize each word, and reading fatigue climbs on longer text.
A simple rule to keep in mind: the longer the text, the more discreet the spacing should stay, often none at all. Reserve a visible letter-spacing for short labels, headings, or uppercase text, and leave normal on paragraphs meant to be read continuously.
word-spacing, rarer but sometimes useful
word-spacing is used more rarely, often to loosen up a visually dense text, or for a specific layout effect where words need more breathing room than letters. A value that is too high, however, breaks the natural word-grouping the eye normally does, making each word feel like an isolated element rather than part of a flowing sentence.
Frequently asked questions
Should letter-spacing always be paired with text-transform: uppercase?
It is not required, but it is by far the most common pairing, because uppercase letters benefit the most from a slight gap. On text left in lowercase, a positive spacing value is rarely needed, since the font already handles natural letter spacing correctly on its own.
What letter-spacing value should be used for a badge or a label?
A value between 0.05em and 0.1em covers most common needs. Beyond that, letters start visually detaching from each other, which can be an intentional effect for a very large heading, but quickly becomes excessive on normal-sized text.
Does negative letter-spacing have any real use?
Yes, it is mostly used on very large headings, where some fonts' default spacing looks too generous at large sizes. Slightly tightening the letters, with a value like -0.02em, corrects that impression without hurting readability, since the text stays short.
Does letter-spacing affect the total width of a text block?
Yes, every extra gap between characters adds a bit of width to the rendered text. On a button or a label whose width adjusts to its content, a large letter-spacing can therefore slightly enlarge the element compared to the same text with no spacing at all.