The Complete CSS Word Spacing Interactive Tutorial

Table of Contents

What Is CSS `word-spacing`?

The CSS word-spacing property controls the amount of space between words. If you have a sentence, CSS looks at the spaces between the words and lets you increase or decrease those gaps.

Think of it as breathing room between words. Not between letters, not between lines, but specifically between one word and the next.

This property is useful when you want to:

loosen up a heading or tagline,
make a navigation menu feel more airy,
adjust the rhythm of a short text treatment,
or experiment with typography in a more intentional way.

For beginners, the most important thing to remember is this: word-spacing affects spaces between words, while letter-spacing affects the spaces between individual letters.

.demo {
  word-spacing: normal;
}

.demo {
  word-spacing: 0.4rem;
}

.demo {
  word-spacing: 1rem;
}

*,
::before,
::after {
  box-sizing: border-box;
}

.demo {
width: min(100%, 42rem);
padding: 1rem;
border: 2px solid #111;
border-radius: 0.75rem;
background: #f8f8f8;
font: 600 1.25rem/1.6 Arial, sans-serif;
}

CSS word spacing changes the visual gap between words in a sentence.

Learn more about letter-spacing in the CSS Letter Spacing Interactive Tutorial.

CSS `word-spacing` Property: Syntax and Default Value

The syntax is refreshingly simple:

<property>: <value>;

In this case:

word-spacing: normal;

Or:

word-spacing: 0.5rem;

The default value is normal. That means the browser uses its normal spacing between words based on the current font and text rendering rules.

You can use:

normal to keep the default browser behavior,
a length value like 2px, 0.25rem, or 1em,
and even negative values like -0.1em if you want to tighten the spacing.

A positive value adds extra space. A negative value reduces the space. A value of 0 means no extra spacing is added beyond the normal layout behavior.

word-spacing: normal 0rem 0.5rem 1rem -0.15rem

.sample {
  word-spacing: normal;
}

*,
::before,
::after {
  box-sizing: border-box;
}

.sample {
  width: min(100%, 40rem);
  padding: 1rem;
  border: 2px solid #111;
  border-radius: 0.75rem;
  background: #fffdf2;
  color: #1f1f1f;
  font: 700 1.15rem/1.7 Georgia, serif;
}

The quick brown fox jumps over the lazy dog near the quiet river bank.

Basic CSS `word-spacing` Examples

Let’s make the property feel concrete. The following playground compares the most common kinds of values you will use:

normal for the default look,
a small positive value for subtle spacing,
a larger positive value for a dramatic look,
and a negative value for tighter word spacing.

Small changes often go a long way. With typography, the difference between “nice” and “why does this feel wrong?” can be surprisingly tiny.

.headline {
  word-spacing: normal;
}

.headline {
  word-spacing: 0.2rem;
}

.headline {
  word-spacing: 0.8rem;
}

.headline {
  word-spacing: -0.1rem;
}

*,
::before,
::after {
  box-sizing: border-box;
}

.headline {
display: inline-block;
padding: 1rem 1.25rem;
border: 2px solid #111;
border-radius: 999px;
background: #eef6ff;
font: 800 1.5rem/1.4 Arial, sans-serif;
}

Build better layouts with cleaner spacing

How Positive Values Work

Positive values add extra space between words. The bigger the value, the larger the gap.

This can work nicely for:

hero headings,
short UI labels,
capsule buttons,
or decorative text treatments.

It is usually best to keep the effect subtle for longer paragraphs. Large word gaps inside body text can hurt readability.

How Negative Values Work

Negative values tighten the space between words. This can create a compact, punchy look, but it can also become hard to read very quickly.

If your text starts feeling cramped or glued together, you have probably gone too far.

Interactive Word Spacing Slider

Since word-spacing uses numeric values, it is a perfect candidate for a range slider. Move the slider and watch the spacing change live.

Word Spacing

.banner {
  word-spacing: 0.2rem;
}

*,
::before,
::after {
  box-sizing: border-box;
}

.banner {
  width: min(100%, 44rem);
  padding: 1.25rem;
  border: 2px solid #111;
  border-radius: 1rem;
  background: linear-gradient(135deg, #f7f1ff, #eef8ff);
  text-align: center;
  font: 800 1.6rem/1.5 Arial, sans-serif;
}

Which Units Can You Use With `word-spacing`?

You can use length units such as:

px,
rem,
em.

Each unit changes how the spacing scales.

px is fixed and predictable.
rem scales with the root font size.
em scales with the element’s own font size.

For typography, rem and em are often especially useful because they stay more proportional to the text size.

.card-title {
  word-spacing: 4px;
}

.card-title {
  word-spacing: 0.25rem;
}

.card-title {
  word-spacing: 0.2em;
}

*,
::before,
::after {
  box-sizing: border-box;
}

.card-title {
width: min(100%, 32rem);
margin: 0;
padding: 1rem;
border: 2px solid #111;
border-radius: 0.75rem;
background: #f6fff6;
font: 700 2rem/1.4 Arial, sans-serif;
}

Smart spacing improves visual rhythm

When To Use `px`, `rem`, or `em`

Use px when you want a very exact value.

Use rem when you want spacing that stays consistent with the site’s general scale.

Use em when you want the spacing to follow the font size of that specific element more closely.

`word-spacing` vs `letter-spacing`

This is one of the easiest places for beginners to mix things up.

word-spacing changes the gap between words.
letter-spacing changes the gap between letters.

If your goal is to spread out characters like L O G O, you probably want letter-spacing.

If your goal is to widen the gap between words like Launch Your Course, you want word-spacing.

.example {
  word-spacing: 0.8rem;
}

.example {
  letter-spacing: 0.2rem;
}

.example {
  word-spacing: 0.6rem;
  letter-spacing: 0.08rem;
}

*,
::before,
::after {
  box-sizing: border-box;
}

.example {
width: min(100%, 38rem);
padding: 1rem;
border: 2px solid #111;
border-radius: 0.75rem;
background: #fff5f2;
font: 800 1.4rem/1.6 Arial, sans-serif;
text-transform: uppercase;
}

Learn CSS faster

Can You Use Both Together?

Yes. In fact, combining them carefully can create polished text styles.

Just be careful not to overdo it. Too much letter spacing plus too much word spacing can make text feel disconnected and awkward to read.

Using `word-spacing` In Body Text

For paragraphs, subtlety matters. Body text usually works best when spacing changes are small. A giant value may look interesting for a second, then annoy everyone for the next ten minutes.

A tiny positive value can sometimes make a paragraph feel a touch more open. A negative value can make it feel denser. Both can be useful, but readability should always win.

.copy {
  word-spacing: normal;
}

.copy {
  word-spacing: 0.08rem;
}

.copy {
  word-spacing: 0.3rem;
}

.copy {
  word-spacing: -0.08rem;
}

*,
::before,
::after {
  box-sizing: border-box;
}

.copy {
width: min(100%, 38rem);
margin: 0;
padding: 1rem;
border: 2px solid #111;
border-radius: 0.75rem;
background: #fafafa;
font: 400 1rem/1.75 Georgia, serif;
}

Good typography is often a series of small decisions that work together quietly rather than one large dramatic effect.

Using `word-spacing` In Headings, Buttons, and Navigation

Short text elements are often better places to experiment with word-spacing because there are fewer words to manage and readability is less fragile.

Word Spacing In Headings

Headings can often handle more spacing than paragraphs, especially bold headings with only a few words.

.title {
  word-spacing: 0.5rem;
}

.title {
  word-spacing: 1rem;
}

.title {
  word-spacing: -0.08rem;
}

*,
::before,
::after {
  box-sizing: border-box;
}

.title {
margin: 0;
padding: 1rem;
border: 2px solid #111;
border-radius: 1rem;
background: #eefdf5;
font: 900 2.2rem/1.2 Arial, sans-serif;
}

Design with confidence

Word Spacing In Buttons

Buttons with short labels can benefit from a little extra space if you want a more refined or premium feel.

.button {
  word-spacing: 0rem;
}

.button {
  word-spacing: 0.3rem;
}

.button {
  word-spacing: 0.6rem;
}

*,
::before,
::after {
  box-sizing: border-box;
}

.button {
display: inline-block;
padding: 0.85rem 1.25rem;
border: 2px solid #111;
border-radius: 999px;
background: #111;
color: #fff;
font: 700 1rem/1.2 Arial, sans-serif;
text-decoration: none;
}


  Start free trial

Navigation labels can also be a good match, especially if you are going for a spaced, editorial look.

.nav a {
  word-spacing: 0.4rem;
}

.nav a {
  word-spacing: 0.8rem;
}

.nav a {
  word-spacing: -0.05rem;
}

*,
::before,
::after {
  box-sizing: border-box;
}

.nav {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
padding: 1rem;
border: 2px solid #111;
border-radius: 1rem;
background: #f4f7ff;
}

.nav a {
padding: 0.65rem 0.9rem;
border: 1px solid #111;
border-radius: 999px;
color: #111;
font: 700 1rem/1.2 Arial, sans-serif;
text-decoration: none;
}


  Home Page
  Course Library
  Design Tips

`word-spacing` Is An Inherited Property

word-spacing is inherited. That means if you apply it to a parent element, the child elements will usually inherit that value unless they set their own.

This is helpful when you want a whole block of text to share the same spacing style.

.article {
  word-spacing: 0.35rem;
}

.article {
  word-spacing: 0.35rem;
}

.article strong {
word-spacing: normal;
}

.article {
  word-spacing: 0.35rem;
}

.article a {
  word-spacing: 1rem;
}

*,
::before,
::after {
  box-sizing: border-box;
}

.article {
  width: min(100%, 40rem);
  padding: 1rem;
  border: 2px solid #111;
  border-radius: 0.75rem;
  background: #fff;
  font: 400 1rem/1.8 Georgia, serif;
}

.article a {
  color: #0a58ca;
}

.article strong {
  color: #222;
}

Careful word spacing can shape how readable text is, and important phrases or linked text can be adjusted separately if needed.

Why Inheritance Matters

If you set word-spacing on a container and something inside looks odd, the child element may simply be inheriting that value. That is not a bug.

CSS `word-spacing` Not Working

This is one of the most common beginner questions, and thankfully the usual causes are easy to understand.

Reason 1: There Are No Word Gaps To Change

word-spacing only affects actual spaces between words. If your text is one long word, or you are styling icons, or each character is wrapped separately, there may be no standard word gaps for the browser to adjust.

.demo {
  word-spacing: 1rem;
}

*,
::before,
::after {
  box-sizing: border-box;
}

.demo {
display: grid;
gap: 0.75rem;
width: min(100%, 34rem);
padding: 1rem;
border: 2px solid #111;
border-radius: 0.75rem;
background: #fff7f7;
font: 700 1.15rem/1.5 Arial, sans-serif;
}


  Singlewordexample
  Several words appear here

Reason 2: You Actually Need `letter-spacing`

If you are trying to spread out letters inside one word, word-spacing will not help much. Use letter-spacing instead.

.logo {
  word-spacing: 1rem;
}

.logo {
  letter-spacing: 0.3rem;
}

*,
::before,
::after {
  box-sizing: border-box;
}

.logo {
width: min(100%, 28rem);
padding: 1rem;
border: 2px solid #111;
border-radius: 0.75rem;
background: #f7fbff;
font: 900 2rem/1.3 Arial, sans-serif;
text-transform: uppercase;
}

Brandname

Reason 3: Another Rule Is Overriding It

Your word-spacing rule may be valid, but another CSS rule with higher specificity or later placement may be winning in the cascade.

In plain English: your rule exists, but a more powerful rule is bossing it around.

.notice {
  word-spacing: 1rem;
}

.notice {
  word-spacing: 1rem;
}

.box .notice {
word-spacing: normal;
}

*,
::before,
::after {
  box-sizing: border-box;
}

.box {
  width: min(100%, 36rem);
  padding: 1rem;
  border: 2px solid #111;
  border-radius: 0.75rem;
  background: #f8f8f8;
}

.notice {
  margin: 0;
  font: 700 1.15rem/1.6 Arial, sans-serif;
}


  
    Check the cascade before blaming the property.

Learn more about the cascade in the CSS Cascade Interactive Tutorial, and about specificity in the CSS Specificity Interactive Tutorial.

Reason 4: The Value Is Too Small To Notice

A change like 0.01rem may technically work, but visually it can be too subtle to notice, especially at smaller text sizes.

Try a more exaggerated value first. Once you can see the effect clearly, dial it back.

Reason 5: The Content Is Not A Good Demo

Short text with only one space may not show a dramatic difference. To test word-spacing, use a sentence with several words.

`word-spacing` and White Space Inside HTML

Browsers collapse normal spaces in HTML text. That means multiple spaces in your source code usually display as a single space.

The good news is that word-spacing still works on those normal word gaps. It does not require you to manually type lots of spaces into your HTML.

In fact, manually typing a dozen spaces is usually not the right tool. CSS spacing properties exist so you can control presentation without making the markup weird.

.text {
  word-spacing: 0.8rem;
}

.text {
  white-space: pre-wrap;
  word-spacing: 0.8rem;
}

*,
::before,
::after {
  box-sizing: border-box;
}

.text {
width: min(100%, 38rem);
padding: 1rem;
border: 2px solid #111;
border-radius: 0.75rem;
background: #fffef6;
font: 400 1.05rem/1.75 Georgia, serif;
}

CSS keeps normal word gaps manageable even when the source HTML has irregular spacing.

`word-spacing` With `text-align` and Layout

word-spacing changes the spacing inside the text itself. It does not replace layout tools like:

gap,
margin,
padding,
or flex and grid alignment.

This matters because beginners sometimes try to use word-spacing to separate elements in a layout. That is not what it is for.

Use it for words inside text nodes, not for spacing cards, buttons, or columns apart from each other.

.menu a {
  word-spacing: 0.6rem;
}

.menu {
  gap: 1rem;
}

*,
::before,
::after {
  box-sizing: border-box;
}

.menu {
display: flex;
flex-wrap: wrap;
padding: 1rem;
border: 2px solid #111;
border-radius: 0.75rem;
background: #f4fff8;
}

.menu a {
padding: 0.75rem 1rem;
border: 1px solid #111;
border-radius: 999px;
color: #111;
font: 700 1rem/1.2 Arial, sans-serif;
text-decoration: none;
}


  About Us
  Latest Articles
  Contact Page

Important Distinction Between Text Spacing and Layout Spacing

If you want more room inside the words, use word-spacing.

If you want more room between elements, use layout properties like gap, margin, or padding.

Best Practices For CSS `word-spacing`

Here are some practical guidelines:

Use small adjustments first. Typography usually rewards restraint.
Test on real content, not just two-word placeholders.
Be extra careful with long paragraphs.
Combine with letter-spacing only when the visual goal is clear.
Check readability on different screen sizes.

Accessibility and Readability Tips

The goal of spacing is not just style. It is also readability.

Too much word spacing can make lines feel broken apart. Too little can make text feel crowded. For headings and decorative text, you can be more adventurous. For body text, be conservative.

.readable {
  word-spacing: 0.08rem;
}

.readable {
  word-spacing: 0.7rem;
}

.readable {
  word-spacing: -0.12rem;
}

*,
::before,
::after {
  box-sizing: border-box;
}

.readable {
width: min(100%, 38rem);
padding: 1rem;
border: 2px solid #111;
border-radius: 0.75rem;
background: #fafcff;
font: 400 1rem/1.7 Georgia, serif;
}

Readability improves when spacing choices support the text instead of distracting from it.

Practical Real-World `word-spacing` Patterns

Pattern: Soft Editorial Heading

A small positive word-spacing value can make a heading feel more elegant and polished.

.editorial {
  word-spacing: 0.4rem;
}

*,
::before,
::after {
  box-sizing: border-box;
}

.editorial {
margin: 0;
padding: 1rem;
border: 2px solid #111;
border-radius: 1rem;
background: #fff7fb;
font: 800 2rem/1.25 Georgia, serif;
}

Craft cleaner visual rhythm

Pattern: Compact UI Label

A slight negative value can make short labels feel tighter and more compact, especially in interfaces with limited space.

.label {
  word-spacing: -0.08rem;
}

*,
::before,
::after {
  box-sizing: border-box;
}

.label {
display: inline-block;
padding: 0.5rem 0.8rem;
border: 2px solid #111;
border-radius: 999px;
background: #f3f3f3;
font: 700 0.95rem/1.2 Arial, sans-serif;
}


  New arrival

Pattern: Balanced Call To Action

A medium positive value can make a call-to-action feel a bit more deliberate and premium without becoming awkward.

.cta {
  word-spacing: 0.25rem;
}

*,
::before,
::after {
  box-sizing: border-box;
}

.cta {
display: inline-block;
padding: 0.9rem 1.3rem;
border: 2px solid #111;
border-radius: 999px;
background: #0f172a;
color: #fff;
font: 800 1rem/1.2 Arial, sans-serif;
text-decoration: none;
}


  Join our course

CSS `word-spacing` Cheat Sheet

Property: word-spacing
What it does: changes the space between words
Default value: normal
Inherited: yes
Common values: normal, 2px, 0.2rem, -0.05em
Best for: headings, labels, buttons, short text styling, subtle paragraph tuning
Not for: spacing layout elements apart
Common confusion: mixing it up with letter-spacing

Final Thoughts On CSS `word-spacing`

word-spacing is a small property, but it can have a surprisingly strong effect on the personality of text.

The main idea is simple:

use it to adjust the gaps between words,
start with subtle values,
use stronger values mostly for short text,
and do not confuse it with layout spacing or letter spacing.

If you remember just one thing, remember this: word-spacing is for words, not letters and not layout blocks.

Once that clicks, the property becomes much easier to use well.

For layout spacing, check out the CSS Flexbox Interactive Tutorial and CSS Grid Interactive Tutorial.

Share:

Leave the first comment (Cancel Reply)

You must be logged in to post a comment.

The Complete CSS Word Spacing Interactive Tutorial

What Is CSS word-spacing?

CSS word-spacing Property: Syntax and Default Value

Basic CSS word-spacing Examples

How Positive Values Work

How Negative Values Work

Interactive Word Spacing Slider

Which Units Can You Use With word-spacing?

When To Use px, rem, or em

word-spacing vs letter-spacing