Here are the latest developments and practical trends around letter spacing.
What’s new
- CSS letter-spacing discussions continue to evolve in browser standards work. There are ongoing conversations about how spacing should be computed across inline and inline-block elements, and how it interacts with line height and justification in complex layouts.[2]
- The US Web Design System (USWDS) and other design systems periodically update their tokens and guidance for typography, including letter spacing, to improve readability and accessibility on government and public-facing sites.[3]
- General reference resources (including standards bodies and typography-focused guides) continue to emphasize subtle, readable adjustments to letter spacing, especially for small text or all-caps headings, to improve legibility without drawing attention to the spacing itself.[4][7]
Practical guidelines
- Use modest positive values for body text (often around 0 to 0.5px depending on font and size) to enhance readability when text feels crowded; avoid large spaces that disrupt word shapes and rhythm.[8][10]
- Reserve increased letter spacing for all-caps headlines or UI labels where tightening would hinder readability at small sizes; for body copy, let the natural font metrics do the work and only adjust when there’s a specific legibility need.[4]
- When adjusting letter spacing, test across multiple devices and fonts; what works well in one font can look off in another due to kerning and advance width differences.[9][8]
Tips for practice
- If you’re using CSS, prefer sub-pixel values and test at the target font size and weight; avoid negative spacing unless you’re fine-grained tuning for a decorative effect, as it can reduce readability.[7][10]
- For accessibility, ensure sufficient overall character spacing on small text or high-density UI elements to avoid crowding; keep changes subtle to maintain natural reading flow.[7][9]
Illustration example
- A typical, accessible approach: body text at 16px with a light, subtle positive letter-spacing (e.g., 0.2px to 0.4px) for improved legibility, while headings may use a slightly larger spacing to create a clear typographic hierarchy without feeling sporadic.
If you’d like, tell me your target context (font family, size, weight, and whether it’s body text or headings) and I can suggest precise spacing values and a CSS snippet. I can also summarize how recent discussions might affect your project schedule or component design.
Sources
Helping you fall in love with CSS.
www.kevinpowell.coConsidering 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.comUSWDS makes it easier to build accessible, mobile-friendly government websites.
designsystem.digital.govLetter spacing is the adjustment of spaces between characters in a text. It is as if you let your letters have air or make them snuggle close together.
inkbotdesign.comThe letter-spacing CSS property sets the spacing between text characters. This value is added to the natural spacing between characters while rendering the text. Positive values of letter-spacing spread characters further apart, while negative values of letter-spacing bring characters closer together.
developer.mozilla.orgThe letter-spacing CSS property sets the horizontal spacing behavior between text characters. This value is added to the natural spacing between characters while rendering the text. Positive values of letter-spacing causes characters to spread farther apart, while negative values of letter-spacing bring characters closer together.
developer.mozilla.org