🌐 What Is word-spacing?

The word-spacing property controls thespace between words in text. It affects how readable and visually balanced text appears — especially in headings, paragraphs, and UI labels.

📦 Syntax

word-spacing: normal | <length> | <percentage>;

📌 1. Basic Example

p {
  word-spacing: 8px;
}

Adds 8px extra space between every word.

📌 2. Negative Word Spacing

h1 {
  word-spacing: -4px;
}

Pulls words closer together — sometimes used for typography in logos and banners.

📌 3. Percentage Word Spacing

p {
  word-spacing: 50%;
}

Adds spacing equal to **50% more** than the browser's default word gap.

📌 4. Using Word Spacing in Headings

h2 {
  word-spacing: 0.2em;
}

Helps balance long headings or titles visually.

📌 5. Word Spacing Combined with Letter Spacing

p {
  word-spacing: 10px;
  letter-spacing: 1px;
}

Both spacing types can be used together for professional text styling.

📌 6. Using in UI Elements

button {
  word-spacing: 6px;
  text-transform: uppercase;
}

Creates a clean, spaced-out UI look for calls-to-action.

📌 7. Applying to Specific Words

You cannot directly apply word spacing to a subset of text unless the text is separated into inline elements.

span.word-group {
  word-spacing: 20px;
}

This spacing applies only to the inline <span> region.

📌 8. Using CSS Custom Properties with Word Spacing

:root {
  --space: 0.5rem;
}

p {
  word-spacing: var(--space);
}

🧪 Real-World Examples

1️⃣ Magazine-Style Typography

article p {
  word-spacing: 0.15em;
  line-height: 1.7;
}

2️⃣ Hero Banner Heading

.hero-title {
  font-size: 3rem;
  word-spacing: 0.3em;
}

3️⃣ Minimizing Word Spacing for Compact Text

.compact {
  word-spacing: -2px;
}

⚠️ Common Mistakes

🔥 Summary

The word-spacing property adjusts the spacing *between words*, improving readability or achieving stylistic effects. Use it for paragraphs, headings, UI elements, and hero sections to fine-tune your typography.

Learn more →MDN Docs 📘