The word-spacing property adjusts the horizontal spacing specifically between whole words, adding or removing space at each word boundary without affecting the spacing between individual letters within a word.

Syntax

word-spacing: normal | length;

Deep Dive Course

word-spacing adds extra space, or with a negative value, removes space, specifically at the space characters between words, leaving the letter-spacing within each individual word completely unaffected — this makes it distinct from, and usable together with, letter-spacing, which instead affects the spacing between every pair of characters, including those within a single word. Word-spacing is used considerably less often than letter-spacing in practice, since large adjustments to inter-word spacing can quickly start to look unnatural or hurt readability, especially in justified text where word spacing is already being dynamically adjusted by the browser to fill each line evenly.

1Understanding Word-spacing

💡

Use word-spacing sparingly and with small values — since it directly affects the readability-critical spacing between words, larger adjustments tend to look unnatural much more quickly than an equivalent adjustment to letter-spacing does.

editor.html

.spaced-out {
  word-spacing: 8px;
}

localhost:3000

2Practical Example

Here is a real-world application of Word-spacing showing how it is used in production CSS code.

editor.html

.tight-text {
  word-spacing: -2px;
}

localhost:3000

3Best Practices

Follow these guidelines when working with Word-spacing:

1. Reach for word-spacing only for subtle adjustments to a design's visual rhythm, since large changes to inter-word spacing quickly look unnatural

2. Combine word-spacing and letter-spacing together deliberately when a design genuinely calls for both, since they affect entirely separate, independent aspects of text spacing

3. Be cautious combining word-spacing with justify-aligned text, since the browser is already dynamically adjusting word spacing there to achieve even line edges

⚠️

Tip: Use word-spacing sparingly and with small values — since it directly affects the readability-critical spacing between words, larger adjustments tend to look unnatural much more quickly than an equivalent adjustment to letter-spacing does.

editor.html

.spaced-out {
  word-spacing: 8px;
}

localhost:3000

Examples

Example 01Basic Usage

.spaced-out {
  word-spacing: 8px;
}

Example 02Advanced Example

.tight-text {
  word-spacing: -2px;
}

Best Practices

Reach for word-spacing only for subtle adjustments to a design's visual rhythm, since large changes to inter-word spacing quickly look unnatural
Combine word-spacing and letter-spacing together deliberately when a design genuinely calls for both, since they affect entirely separate, independent aspects of text spacing
Be cautious combining word-spacing with justify-aligned text, since the browser is already dynamically adjusting word spacing there to achieve even line edges

Interview Question

Why doesn't increasing word-spacing also visually affect the spacing between letters within an individual word?▼

Hint: Think about specifically what character, or boundary, word-spacing's extra space is actually being added at, compared to what letter-spacing targets.

word-spacing specifically targets and adds its extra spacing value only at whitespace characters, the actual space characters that separate one word from the next, it has no defined effect at all on the spacing between the individual, non-whitespace characters that make up a single word's own letters. Since a word's internal characters are directly adjacent to each other with no whitespace character in between them for word-spacing to actually apply its adjustment to, the spacing between those internal letters is left completely governed by the font's own natural character spacing, and separately, by whatever letter-spacing value might independently be applied, which does specifically affect the space between every pair of adjacent characters, whitespace or not. This clean separation, one property targeting specifically inter-word whitespace, the other targeting spacing between all adjacent characters generally, is exactly what allows the two properties to be adjusted completely independently of one another without either one interfering with what the other is doing.

Exercises

MediumPractice using Word-spacing in a real scenario.

View Solution

.spaced-out {
  word-spacing: 8px;
}

Frequently Asked Questions

Why doesn't increasing word-spacing also visually affect the spacing between letters within an individual word?▼

Related Functions

Letter-spacingText-alignText-transform