CSS letter-spacing and word-spacing: percentage values

concepts

1. Percentage Spacing Demo

   Interactive sliders for letter-spacing and word-spacing as percentages. See the values applied live, the computed pixel equivalent shown alongside, and compare against equivalent pixel-based values.

2. Font Size Scaling

   Side-by-side view at multiple font sizes: percentage-based spacing stays proportional to each size, while fixed px or em spacing shifts the visual rhythm. Shows why % is the natural unit for typography-aware spacing.

3. Headline Tuner

   Drag two sliders to set letter-spacing and word-spacing as percentages, then cycle through display, headline, subhead, and body sizes. The same percentage stays visually proportional at every size.

4. Type Specimen

   A full type specimen (display → caption, six sizes) with two percentage sliders. Each row shows the live computed pixel equivalent for that font size — demonstrating how one percentage value gives perfect proportional rhythm across the whole type scale.

5. Branding Playground

   Edit a brand headline and tagline; adjust letter-spacing and word-spacing as percentages with colour and transform controls. A scale ladder shows the same percentage value rendering proportionally from display to caption — one rule for the whole type hierarchy.

why it shipped

Before Chrome 145, letter-spacing and word-spacing only accepted lengths (px, em, rem, etc.). Using em was the closest approximation to proportional spacing, but 1em is the cap height of the font — not the space character width. The CSS Text Module Level 4 spec defines percentage values as relative to the advance width of U+0020, which tracks the actual space glyph. On proportional fonts this gives designers a much more natural control: letter-spacing: 5% means "5% of a space", not "5% of something else". The feature also reduces the need to re-override spacing rules at every breakpoint because the spacing grows or shrinks automatically with the font size.

the new syntax

/* Before Chrome 145 — only lengths accepted */
h1 { letter-spacing: 2px; }
p  { word-spacing: 0.1em; }

/* Chrome 145+ — percentage relative to U+0020 advance width */
h1 { letter-spacing: 5%; }
p  { word-spacing: 20%; }

/* Works in all contexts: large and small type alike */
.hero   { font-size: 4rem; letter-spacing: 3%; }
.caption { font-size: 0.75rem; letter-spacing: 3%; } /* same %, right visual weight */

/* Negative values tighten spacing */
.condensed { letter-spacing: -2%; }

references

• ChromeStatus entry
• MDN — letter-spacing
• MDN — word-spacing
• CSS Text Level 4 spec