CSS word-spacing Property

What You’ll Learn

The word-spacing property adjusts the gap between words — useful for readability tweaks, headings, and decorative typography.

Introduction

The word-spacing property in CSS is used to specify the spacing between words in a text element. This property can be particularly useful for improving the readability of text, creating unique design effects, or adhering to specific design guidelines.

By adjusting the space between words, you can control the overall appearance and legibility of your text content.

Definition and Usage

Apply word-spacing on paragraphs, headings, labels, and buttons when you need finer control than line-height alone provides. Small adjustments can make uppercase headings feel more balanced; large adjustments are best reserved for short display text.

📝 Syntax

The syntax for the word-spacing property is simple and allows you to specify the space between words in various units.

element {
  word-spacing: normal | <length>;
}

The value can be the keyword normal or a length such as px, em, or rem. Negative lengths are allowed.

Basic Example

p {
  word-spacing: 10px;
}

Syntax Rules

• normal resets to the browser default word spacing.
• Length values add to (or subtract from with negatives) the normal spacing.
• em and rem scale with font size for responsive typography.
• Does not affect space inside words — only between word boundaries.
• The property is inherited.

Related Properties

• letter-spacing — spacing between characters
• line-height — vertical spacing between lines
• text-align — horizontal alignment of text
• font-size — affects em-based word-spacing proportions

🎯 Default Value

The default value of the word-spacing property is normal, which means the spacing between words is the default spacing used by the browser for the current font.

💎 Property Values

The word-spacing property accepts the keyword normal or length values.

When to Use word-spacing

word-spacing is helpful for fine typography tuning:

• Display headings — Open up uppercase titles with extra word space.
• Badges and labels — Improve legibility of short tracked-out text.
• Justified text fixes — Subtle tweaks when justified lines look uneven (use carefully).
• Brand typography — Match design specs for marketing hero sections.
• Compact UI text — Slight negative spacing in tight toolbars (with caution).

Examples Gallery

In this example, we’ll increase the word spacing of a paragraph to 10 pixels.

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

<p>
  This is an example of text with increased word spacing.
</p>

.wide { word-spacing: 0.5em; }
.tight { word-spacing: -2px; }

.hero-title {
  text-transform: uppercase;
  word-spacing: 0.35em;
  letter-spacing: 0.08em;
}

.badge {
  text-transform: uppercase;
  word-spacing: 0.25em;
  letter-spacing: 0.06em;
}

♿ Accessibility

• Keep body text readable — Large word-spacing on paragraphs can hurt readability for dyslexic users and low-vision readers.
• Avoid extreme negative values — Words that crowd together are harder to scan and select.
• Test with zoom — Em-based spacing scales better than large fixed px values when users zoom text.
• Do not rely on spacing alone — Meaning should be clear from words themselves, not only from layout tricks.

word-spacing + letter-spacing

Headlines and labels often use both properties: word-spacing for gaps between words, and letter-spacing for gaps between characters.

.label {
  word-spacing: 0.2em;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

💡 Best Practices