CSS word-spacing Property

The word-spacing property controls the amount of horizontal space the browser inserts between words — specifically the gaps that exist where text contains one or more whitespace characters. It is a typographic tool for adjusting the rhythm and density of a block of text: small increases can improve readability in tightly set type, while reductions can help squeeze more text into a constrained layout without changing font size. Note that word-spacing operates on inter-word gaps; it does not alter the spacing between individual glyphs inside a word (that is handled by letter-spacing).

Because browsers collapse and render whitespace according to layout rules, the visual effect of word-spacing depends on surrounding formatting decisions. The property's effect is applied to the spaces the renderer treats as word separators, so its visible result is influenced by how whitespace is handled in the document flow — for example, behavior governed by white-space — and by line-breaking and hyphenation strategies (see hyphens). When text is justified, word gaps may be stretched or compressed by the justification algorithm in addition to any explicit adjustments, so the interplay between word spacing and alignment can produce subtle or dramatic changes in text color and rag.

In practical use, designers apply word-spacing for typographic refinement: to improve horizontal balance in headlines, to adjust density for long-form reading, or to harmonize spacing across different fonts and languages. Large adjustments can affect legibility and the sense of rhythm, so they are often paired with other text properties to maintain overall harmony — for example, alignment settings like text-align and vertical metrics such as line-height. Use it judiciously, especially in multilingual contexts where script-specific spacing conventions and font metrics can cause the same adjustment to look very different.