Word Spacing

While letter-spacing adjusts space between characters, word-spacing adjusts the space between words. It is less commonly used than letter-spacing, but it is useful for fine-tuning typography, especially in headings and display text.

Basic Usage

You can add or reduce space between words using positive or negative values. The default value is normal, which uses the font's built-in word spacing.

.spaced-words {
  word-spacing: 10px;
}

.tight-words {
  word-spacing: -3px;
}

.default {
  word-spacing: normal;
}
    

A small positive value like 2-5px can make headlines feel more open and elegant. Negative values are rarely used but can create an interesting condensed look.

Word Spacing vs Letter Spacing

The difference is simple: word-spacing affects gaps between words, letter-spacing affects gaps between letters. In most cases, letter-spacing has a bigger visual impact because there are more characters than words. Word-spacing is more subtle.

/* Letter spacing: affects every character */
.headline {
  letter-spacing: 2px;
}

/* Word spacing: affects only word gaps */
.headline {
  word-spacing: 8px;
}
    

You can use both together for maximum control, but start with one and adjust from there. Using both at extreme values can make text hard to read.

When to Use Word Spacing

Word-spacing is most useful in large display text, pull quotes, and hero sections. It can also help with justified text where the browser's default word spacing does not look right.

.hero-text {
  font-size: 48px;
  word-spacing: 6px;
  line-height: 1.3;
}

.pull-quote {
  font-size: 28px;
  font-style: italic;
  word-spacing: 4px;
}
    

Keep the values small. Even a few pixels of word spacing can dramatically change the feel of large text. Always preview with your actual content to make sure it looks right.