📘 What is CSS Word Spacing?

The CSS word-spacing property controls the amount of horizontal space between words in text.

Unlike letter-spacing, which changes the space between individual characters, word-spacing changes the space between words.

🧩 CSS Word Spacing Syntax

selector {
    word-spacing: value;
}

You can use values such as normal, pixel values, em, rem and other valid CSS length values.

⚪ Example 1: Normal Word Spacing

The normal value uses the browser’s default spacing between words.

p {
    word-spacing: normal;
}

📏 Example 2: 5px Word Spacing

A positive value increases the space between words.

p {
    word-spacing: 5px;
}

📐 Example 3: 12px Word Spacing

.heading {
    word-spacing: 12px;
}

↔️ Example 4: Large Word Spacing

A larger value creates significant space between words.

.title {
    word-spacing: 20px;
}

↔️ Example 5: Negative Word Spacing

Negative values reduce the space between words.

p {
    word-spacing: -3px;
}

🔤 Example 6: Using em

Relative units such as em allow the spacing to scale according to the font size.

.heading {
    word-spacing: .5em;
}

▶️ Live Comparison

Compare different word-spacing values below.

🔍 Letter Spacing vs Word Spacing

🎯 Practical Example: Section Heading

Word spacing can be combined with text transformation to create clean section headings.

.section-title {
    text-transform: uppercase;
    word-spacing: 8px;
    font-weight: 700;
}

🔘 Practical Example: Button Text

.button {
    text-transform: uppercase;
    word-spacing: 3px;
    font-weight: bold;
}

📰 Practical Example: Article Text

Word spacing should normally remain subtle in paragraphs. The following example demonstrates a moderate value.

.article p {
    word-spacing: 2px;
    line-height: 1.8;
}

💡 Practical Uses

⚠️ Common Mistakes

• Confusing word-spacing with letter-spacing.
• Using extremely large spacing in paragraphs.
• Using negative values that cause words to overlap.
• Forgetting to test the design on mobile screens.
• Using word spacing when normal margins or layout spacing would be more appropriate.

📝 Practice Exercises

Try these exercises in your HTML Runner:

1. Create a paragraph using word-spacing: 5px;.
2. Change the value to 10px.
3. Try a negative value such as -2px.
4. Create a heading using 0.5em.
5. Compare letter-spacing and word-spacing.
6. Create a professional section heading using uppercase text and word spacing.
7. Create an “Enroll Now” button with controlled word spacing.

📚 Quick Reference

🎓 Key Points to Remember

• word-spacing controls the space between words.
• Positive values increase word spacing.
• Negative values reduce word spacing.
• normal uses the browser’s normal spacing.
• Relative units such as em can be used for scalable typography.
• word-spacing is different from letter-spacing.
• Always prioritize readability over decorative spacing.