ワードスペーシング

Word spacing controls the additional space inserted between words, on top of the space character already defined in the font. In CSS, this is the word-spacing property. While letter-spacing adjusts space between all characters uniformly, word-spacing targets only the gaps between words — the spaces that separate one word from the next.

The default word spacing is defined by the font itself — every typeface includes a built-in space width appropriate to its design. CSS's word-spacing property adds to (or subtracts from) this default. Positive values widen the gaps between words; negative values narrow them. You can use any CSS length unit: px, em, rem, or percentage.

/* Default — trust the font */
p {
  word-spacing: normal; /* Equivalent to word-spacing: 0 */
}

/* Increase word spacing for looser, more airy text */
.display-text {
  word-spacing: 0.1em;
}

/* Decrease word spacing in narrow columns where justification creates gaps */
.narrow-column {
  text-align: justify;
  word-spacing: -0.05em; /* Pull words slightly closer */
}

/* Useful for UI navigation with letter-spaced uppercase labels */
.nav-links {
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  word-spacing: 0.2em; /* Extra word separation to compensate for letter-spacing */
}

/* Language-specific adjustments — CJK typically needs no word spacing */
:lang(ja), :lang(zh) {
  word-spacing: 0;
}

Word spacing becomes particularly important when working with justified text. CSS text justification distributes extra space between words to create flush left and right edges — but the algorithm is crude compared to professional typesetting software. The result can be large, visually disruptive gaps between words, especially in narrow columns. Combining modest negative word-spacing with justified alignment can smooth these gaps:

.justified-body {
  text-align: justify;
  hyphens: auto; /* Hyphenation dramatically helps justified text */
  word-spacing: -0.02em;
}

One nuance: letter-spacing affects the space after every character, including the space character itself. Adding letter-spacing without compensating word-spacing can make word gaps appear disproportionately large. The uppercase navigation pattern above — common on sites using typefaces like Montserrat or Raleway — often needs this adjustment to maintain proper visual word separation.