Keeping track of letter-spacing, some guidelines | CSS-Tricks
Considering that written words are the foundation of any interface, it makes sense to give your website's typography first-class treatment. When setting type,
css-tricks.comHere’s a quick update on the latest around letter spacing.
Answer
- The current landscape shows ongoing discussion about how letter-spacing should behave across browsers and the CSS model, with several high-profile discussions and updates in 2024–2026. MDN currently describes letter-spacing as adding space between characters, with positive values widening the gap and negative values tightening it. There have been practical discussions and proposals around how letter-spacing interacts with inline boundaries and line edges, highlighting compatibility considerations across engines like Firefox, Chrome, and Safari.[2][6][10]
Key developments and resources
- CSS spec discussions and proposals: The CSS Working Group has explored refinements to how letter-spacing is modeled, including how spacing is distributed around character boundaries and how it interacts with alignment in complex layouts. This reflects ongoing efforts to improve predictability and accessibility in typography on the web.[2]
- Guidance and best practices: Industry voices continue to emphasize subtle, readable use of letter-spacing, especially for uppercase text or small font sizes where readability can benefit from modest spacing adjustments.[4][8]
- Practical references and references: Mainstream documentation defines the property’s behavior and its impact on rendering, including positive/negative spacing effects and cross-browser considerations.[6][10]
- Related design systems: Government and design system documentation note typography settings, including letter-spacing tokens, to ensure accessible and consistent micro-typography across platforms.[3]
Illustration
- Example: When increasing readability for small uppercase text, designers often apply a small positive letter-spacing value (e.g., 0.5–1px) to create a bit more air between characters without sacrificing overall density. This aligns with common do/don’t guidance in typography resources.[4]
Would you like a concise summary of the most up-to-date browser behavior differences or a quick checklist for applying letter-spacing effectively in your current project? I can tailor it to your stack (HTML/CSS, React, or design system) and provide code examples.
Citations
- The general definition and behavior of letter-spacing: MDN.[10][6]
- CSS spec discussions and compatibility notes: W3C CSSWG issues.[2]
- Practical guidelines and use cases: Kevin Powell’s guidance and CSS-Tricks article.[8][4]
- Design system updates mentioning typography tokens: USWDS page.[3]