Word Spacing

CSS Word Spacing

The CSS word-spacing property controls the horizontal space between words in text. It can increase or decrease the normal spacing provided by the selected font and can be useful for making small typographic adjustments.

The word-spacing Property

The CSS word-spacing property adjusts the space between words. A length value adds to or subtracts from the normal spacing that the browser and font would otherwise use.

p {
  word-spacing: 5px;
}

This rule adds 5 pixels of additional space between words.

The normal Value

The normal value uses the normal word spacing determined by the font and browser. It is the initial value of the word-spacing property.

p {
  word-spacing: normal;
}

The normal value can also be used to restore normal spacing when another value would otherwise be inherited.

Positive Word Spacing

A positive length value increases the space between words. Larger values move neighboring words farther apart.

p {
  word-spacing: 8px;
}

Positive word spacing can create a more open appearance, but excessive spacing can make a sentence feel disconnected and harder to read.

Negative Word Spacing

A negative length value reduces the normal space between words.

p {
  word-spacing: -2px;
}

Negative values should be used carefully because reducing the spacing too much can make neighboring words difficult to distinguish.

Word Spacing Units

The word-spacing property accepts CSS length units such as px, em, and rem. Relative units can be useful when the spacing should change along with the size of the text.

.pixels {
  word-spacing: 5px;
}

.relative {
  word-spacing: 0.25em;
}

A pixel value provides a fixed adjustment, while an em value is relative to the element's font size.

For example, 0.25em adds spacing equal to one quarter of the element's current font size.

Try Different Word Spacing

Edit the word-spacing values in the example to compare normal, wider, and tighter spacing between words.

Word Spacing and Inheritance

The word-spacing property is inherited. Descendant elements generally use the word spacing of their parent unless another CSS rule specifies a different value.

section {
  word-spacing: 5px;
}

section p {
  word-spacing: normal;
}

Text inside the section inherits the additional word spacing, while paragraphs return to normal spacing because they have their own word-spacing declaration.

Word Spacing vs. Letter Spacing

The word-spacing and letter-spacing properties affect different parts of text. word-spacing adjusts the space between words, while letter-spacing adjusts the space between individual characters.

.words {
  word-spacing: 5px;
}

.letters {
  letter-spacing: 2px;
}

The two properties can be used independently or together, but large adjustments to either can reduce readability.

Word Spacing and Readability

Normal word spacing is designed to make individual words easy to recognize while keeping sentences visually connected. Large changes to that spacing can make reading more difficult.

Small adjustments may be useful for particular fonts or designs, but body text generally works best with normal spacing or only modest changes.

Summary

The CSS word-spacing property controls the horizontal space between words. The normal value uses the font's normal spacing, positive length values increase the space between words, and negative values reduce it. Length units such as px and em can be used depending on how the spacing should behave.

The next tutorial covers Text Indentation and how CSS controls the indentation of the first line of text.