v145 · CSS · Percentage Spacing Demo

Percentage Spacing Demo

Adjust letter-spacing and word-spacing as percentages using the sliders below. Percentage values are relative to the advance width of the space character (U+0020) — so 100% adds one extra space character's worth of spacing between letters or words.

Chrome 145 required for percentage values in letter-spacing and word-spacing. In older browsers these CSS rules are ignored and text renders with normal spacing.

interactive demo

0%
0%

The quick brown fox jumps over the lazy dog.

Pack my box with five dozen liquor jugs.

letter-spacing: 0%; word-spacing: 0%;

compare: percentage vs. pixel

The same letter-spacing: 5% vs a hand-picked letter-spacing: 2px on 20px text. Resize the window or change the preview — at a larger font size the percentage stays proportional while the pixel value stays fixed.

letter-spacing: 5% (percentage)

Typography at scale

Scales with font size automatically

letter-spacing: 2px (fixed)

Typography at scale

Stays 2 px regardless of font size

word-spacing: 30% (percentage)

Wide spaced words here

30% of U+0020 advance width

word-spacing: 8px (fixed)

Wide spaced words here

Stays 8 px regardless of font size

code

/* Percentage values — Chrome 145+ */
.hero {
  font-size: 3rem;
  letter-spacing: 5%;   /* proportional to font size */
  word-spacing: 20%;
}

/* For older browsers: provide a px fallback first */
.tagline {
  letter-spacing: 1px;  /* fallback */
  letter-spacing: 3%;   /* override in Chrome 145+ */
}

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

/* Useful in justify layout — extra inter-word control */
.justified {
  text-align: justify;
  word-spacing: 10%;
}

see also