word-spacing

Changes the spacing between words.

Initial value: normal
Inherited: Yes
Animatable: yes, as a length
Applies to: all elements
JavaScript: element.style.wordSpacing = "0.3em"

On this page

Example
Definition and usage
Syntax
Values
Values in practice
Browser support
Good practices
Related entries

Example

CSS

.slogan {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  word-spacing: 0.4em;
}

Preview

Definition and usage

The word-spacing property adds extra space to every gap between words. A negative value pulls the words closer together.

It’s useful less often than letter-spacing, but it can help with fonts that have a very narrow or very wide space character, and in decorative lettering.

With justified text, the browser already adjusts the spacing between words, and word-spacing is added on top of those calculated values.

Syntax

word-spacing: normal | <length>;

Values

normal
The font’s regular space character.
0.5em
Noticeably wider spacing between words.
-2px
Words closer together.

Value	Description
normal	The font’s regular space character.
0.5em	Noticeably wider spacing between words.
-2px	Words closer together.

Values in practice

normal

The font’s regular space character.

.demo { word-spacing: normal; }

0.5em

Noticeably wider spacing between words.

.demo { word-spacing: 0.5em; }

-2px

Words closer together.

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

Browser support

Widely available

Works in all modern browsers, phones included. You can use it without worry.

Chrome
Edge
Firefox
Safari

Good practices

When you spread out letters with letter-spacing, increase word-spacing too, so words still stand apart clearly.
Don’t use word-spacing for layout spacing, that’s what margins and gap are for.

Related entries

Spotted a mistake or missing an example? Write to us.

Free lessonsPractice CSS in the HTML and CSS courseExercises with hints, a code editor and progress saved as you go.See the course