word-spacing

word-spacing adds to the font’s ordinary spacing between eligible words. A length is extra spacing, not a replacement for the entire space width. It can also change line wrapping.

Compare normal with added spacing

The same sentence appears twice. The second adds .2em at each relevant word separator; the letters inside each word are unchanged.

<p>Read the code and compare the result.</p>
<p class="spaced">Read the code and compare the result.</p>

p {
  max-width: 26ch;
  line-height: 1.6;
}
.spaced {
  word-spacing: 0.2em;
}

Test a restrained spacing override with longer text

The small em addition scales with text size. Increase the value in the editor to see why a spacing choice must be checked against actual wrapping and readability.

<p class="note">
  Keep the words connected as a sentence. Check this paragraph at a narrow width
  and with larger text before choosing a spacing value.
</p>

.note {
  max-width: 30ch;
  word-spacing: 0.08em;
  font-size: 1.125rem;
  line-height: 1.6;
  padding: 1rem;
  background: #eff6ff;
}

Values and defaults

The initial value is normal and the property is inherited. Normal uses the font/browser’s ordinary inter-word spacing. Lengths, including negative lengths, add or subtract space. Modern percentage support uses font size as its basis and needs its own compatibility check; support for lengths alone does not establish it.

This setting affects text separators, not CSS gaps between boxes. Letter-spacing adjusts character spacing, line-height affects line boxes, and gap separates flex/grid items. These are different jobs.

Common mistakes

Large negative spacing can merge words; large positive spacing can make a sentence difficult to follow. No single value improves every font. Test user text-spacing overrides without clipping or overlapping content.

The MDN compatibility data records separate percentage support. Learn line-height, white-space, and text-align.

Sources and browser support

MDN: word-spacing describes the syntax and links to the specification and compatibility data. Check individual values in that table when supporting older browsers.