Letter-spacing controls the horizontal distance between individual characters. Use it sparingly: a well-designed font often needs no adjustment, while even 1px can be dramatic. Small em-based changes let you tune readability or create deliberate display-text effects. section 12.6 section 12.6.1
Choose spacing according to the amount and purpose of the text:
- Keep body copy close to the font’s default unless readability improves with a very small adjustment; test values such as 0.01em. section 12.6.1
- Allow broader spacing on short headings, buttons, and other small elements because these contain too little text for readability to dominate. section 12.6.2
- Consider negative spacing for short slogans or other display text, such as letter-spacing: -0.02em; avoid carrying that treatment into paragraphs. section 12.6.2
- Give all-capital navigation or labels slightly more space, often alongside a smaller font size and text-transform: uppercase. section 12.6.2
Tune a page in small steps
Start with body { letter-spacing: 0.01em; } and compare the result with the default. For a short hero slogan, try letter-spacing: -0.02em. For uppercase navigation links, try letter-spacing: 0.03em. Check headings with forced line wrapping, test one value that feels too tight and another too loose, then choose the middle ground. section 12.6.1 section 12.6.2
Listing 12.12 Setting letter spacing on the body element
@layer global {
body {
margin: 0;
font-family: Roboto, sans-serif;
line-height: 1.4; #1
letter-spacing: 0.01em; #2
background-color: var(--extra-light-gray);
color: var(--text-color);
}
}
Inspect a body-level letter-spacing declaration using an em value, alongside inherited line-height and font settings. section 12.6.1
