letter-spacing adds, or with a negative value, removes, a fixed amount of extra space between every pair of adjacent characters uniformly, distinct from word-spacing, which specifically adjusts the space between whole words rather than individual letters. A small positive value is commonly used to open up all-caps text, since uppercase letters set with default spacing can look visually cramped, while an aggressively large or negative value can meaningfully hurt readability, especially for body text meant to be read at length rather than a short, stylistic heading or label.
1Understanding Letter-spacing
letter-spacing adds, or with a negative value, removes, a fixed amount of extra space between every pair of adjacent characters uniformly, distinct from word-spacing, which specifically adjusts the space between whole words rather than individual letters. A small positive value is commonly used to open up all-caps text, since uppercase letters set with default spacing can look visually cramped, while an aggressively large or negative value can meaningfully hurt readability, especially for body text meant to be read at length rather than a short, stylistic heading or label.
Pair a small positive letter-spacing, like 0.05em to 0.1em, specifically with uppercase or all-caps text — capital letters set at default spacing often look visually cramped, and a little extra letter-spacing typically improves their appearance noticeably.
.badge {
text-transform: uppercase;
letter-spacing: 0.08em;
}2Practical Example
Here is a real-world application of Letter-spacing showing how it is used in production CSS code.
.tight-heading {
letter-spacing: -0.02em;
}3Best Practices
Follow these guidelines when working with Letter-spacing:
1. Add a small positive letter-spacing to uppercase or all-caps text specifically, since capital letters commonly look cramped without a bit of extra breathing room
2. Use an em-based value for letter-spacing rather than a fixed pixel value, so the spacing scales proportionally with the text's own font-size
3. Avoid a large positive or negative letter-spacing on body text meant for extended reading, since it noticeably reduces readability and legibility at that scale
Tip: Pair a small positive letter-spacing, like 0.05em to 0.1em, specifically with uppercase or all-caps text — capital letters set at default spacing often look visually cramped, and a little extra letter-spacing typically improves their appearance noticeably.
.badge {
text-transform: uppercase;
letter-spacing: 0.08em;
}