CSS word-spacing Property
The CSS word-spacing property controls the horizontal space between words and other word separators in text.
Word spacing can be increased or decreased to adjust the appearance and readability of text. CSS allows the browser's normal word spacing to be used or additional spacing to be specified with positive or negative length values.
word-spacing Syntax
The word-spacing property accepts the normal keyword or a CSS length value that adjusts the spacing between words.
p {
word-spacing: 6px;
}This rule adds 6px to the normal spacing between words in matching <p> elements.
Normal Word Spacing
The initial value of word-spacing is normal. This allows the browser and font to determine the normal amount of space between words.
p {
word-spacing: normal;
}The normal value uses the spacing defined by the browser and font rather than adding or subtracting a specific length.
Positive Word Spacing
A positive word-spacing value increases the distance between words by adding to their normal spacing.
p {
word-spacing: 8px;
}Increasing word spacing can make the separation between words more noticeable, but excessive spacing can make sentences harder to follow.
Negative Word Spacing
A negative value decreases the normal space between words.
p {
word-spacing: -2px;
}Negative values can create more compact text, but excessive negative spacing can cause words to appear crowded together and reduce readability.
Word Spacing Units
The word-spacing property accepts CSS length units such as px, em, and rem. Relative units are useful when the amount of spacing should scale with the surrounding typography.
.pixels {
word-spacing: 6px;
}
.em-units {
word-spacing: 0.3em;
}
.rem-units {
word-spacing: 0.3rem;
}An em value is relative to the element's font size, while a rem value is relative to the font size of the root <html> element.
Word Spacing and Readability
Word spacing affects how easily readers can distinguish individual words and follow sentences. Spacing that is too narrow can make words appear crowded together, while excessive spacing can interrupt the visual flow of a sentence.
Small adjustments are usually more appropriate than large changes, particularly for paragraphs and other long passages of text.
When styling text for accessibility, avoid restricting word spacing in ways that prevent users from increasing it when they need additional separation between words.
Inheriting word-spacing
The word-spacing property is inherited. Descendant text normally uses the computed word spacing of its parent unless another CSS rule specifies a different value.
article {
word-spacing: 0.2em;
}Text within the <article> will normally inherit the resulting word spacing unless another rule changes it.
word-spacing Example
The following example uses the word-spacing property to increase the space between words. Open the example in the editor and change 6px to another value. Try normal, 0, 12px, -2px, or 0.3em, then run the code to compare the results.
p {
word-spacing: 6px;
}