CssHow-ToBeginner · 3 min read

How to Set Word-Spacing in CSS: Simple Guide

Use the word-spacing CSS property to control the space between words in text. Set it by specifying a length value like word-spacing: 10px; to increase space or word-spacing: normal; to reset to default spacing.

📐

Syntax

The word-spacing property accepts a length value to increase or decrease the space between words. You can use units like px, em, or rem. The default value is normal, which uses the browser's standard spacing.

normal: Default spacing.
<length>: Adds extra space between words (positive or negative).

css

word-spacing: normal;
word-spacing: 0.5em;
word-spacing: 10px;
word-spacing: -2px;

💻

Example

This example shows three paragraphs with different word-spacing values to demonstrate how spacing changes the look of text.

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Word Spacing Example</title>
<style>
  p.default {
    word-spacing: normal;
  }
  p.wide {
    word-spacing: 1rem;
  }
  p.tight {
    word-spacing: -0.2rem;
  }
</style>
</head>
<body>
  <p class="default">This is a paragraph with normal word spacing.</p>
  <p class="wide">This paragraph has wider spaces between words.</p>
  <p class="tight">This paragraph has tighter spaces between words.</p>
</body>
</html>

Output

Three paragraphs of text: the first with normal spacing, the second with noticeably wider spaces between words, and the third with words closer together than normal.

⚠️

Common Pitfalls

One common mistake is using word-spacing without units, which is invalid. Also, setting negative values too large can make words overlap and hurt readability. Remember that word-spacing only affects spaces between words, not letters.

Wrong example (no units):

word-spacing: 5;

Correct example:

word-spacing: 5px;

css

/* Wrong: missing units */
p { word-spacing: 5; }

/* Right: with units */
p { word-spacing: 5px; }

📊

Quick Reference

Property	Description	Example Values
word-spacing	Controls space between words	normal, 0.5em, 10px, -2px
normal	Default spacing	word-spacing: normal;
length	Adds or reduces space between words	word-spacing: 1rem; word-spacing: -0.1em;

✅

Key Takeaways

Use word-spacing with length units like px, em, or rem to adjust space between words.

The default value normal uses the browser's standard spacing.

Always include units when setting word-spacing to avoid invalid CSS.

Avoid large negative values to prevent words from overlapping.

word-spacing only changes space between words, not letters.