The Do's and Don'ts of letter-spacing
Helping you fall in love with CSS.
www.kevinpowell.coHere’s the latest on letter spacing (typography) and CSS as of 2024–2026.
Core idea
- Letter spacing is the extra space added between characters and is controlled in CSS by the letter-spacing property. Positive values increase space, negative values decrease it, and it can affect readability and overall layout.[7][10]
Recent developments and trends
- CSS specification discussions continue around how letter-spacing should behave across inline elements and line boxes, with proposals aiming for more predictable rendering across engines. The discussions emphasize alignment and consistency when applying spacing to characters, especially in mixed content and multi-language sets.[2]
- Major design systems and guidelines increasingly document practical usage: subtle adjustments (often one to a few pixels or em/spaces) improve readability for uppercase text or small font sizes, while overdoing spacing can hamper legibility and alignment.[3][4]
Practical guidelines
- For body text around 14–18px, keep letter-spacing near 0 to preserve natural rhythm; only slightly expand for uppercase headings or small text where readability improves with a touch of spacing.[4][8]
- When using large or all-caps text, a small positive letter-spacing value can improve legibility and perceived word spacing; avoid large or inconsistent spacing across lines.[8][4]
- Test across devices and browser engines, since implementations can vary in how spacing is applied relative to glyph widths and font metrics.[2][7]
Common resources and references
- MDN CSS reference for letter-spacing (technical definition and behavior).[10][7]
- Community guidelines and tutorials on letter-spacing best practices (dos and don’ts, readability considerations).[4][8]
- Industry discussions and design system notes on spacing tokens and consistent rendering in responsive designs.[3]
If you want, I can tailor guidance to your project (font family, sizes, language, and target devices) and suggest exact CSS values and test cases. I can also assemble a quick reference chart or a sample typography checklist.