CSS word-spacing Property

Definition and Usage

The word-spacing property sets the spacing between words. A length or percentage value is extra space added to the font’s normal inter-word gap — not a replacement for it.

The property is inherited. The initial value is normal. Use it for light typography tuning; pair with letter-spacing when you also adjust space inside words.

CSS Syntax

Example: word-spacing: 0.25em;. Percentages resolve against the text’s font-size.

Property Values

How to Use word-spacing

Start from normal, then add a small length or percentage until the line feels right.

1. Apply word-spacing on the text element (or a parent — it is inherited).
2. Prefer relative units (em, %) when font size may change.
3. Keep values modest. Large gaps or heavy negatives hurt readability (WCAG 1.4.8).
4. Use letter-spacing for character gaps; use this property for word gaps.

Live Preview

Change word-spacing and watch the gaps between words open or tighten.

CSS Examples

Each snippet focuses on word-spacing with a short sentence so the effect is easy to see. Use Try It Yourself for a live editor.

<style>
  p {
    word-spacing: 0.4em;
  }
</style>

<p>The quick brown fox jumps over the lazy dog.</p>

<style>
  p {
    font-size: 1.25rem;
    word-spacing: 15%;
  }
</style>

<p>The quick brown fox jumps over the lazy dog.</p>

<style>
  p {
    word-spacing: -2px;
  }
</style>

<p>The quick brown fox jumps over the lazy dog.</p>

Key Takeaways