word-spacing

lets take a look at the word-spacing property

word-spacing is the CSS property that adds or subtracts the amount of space between each word in your text element, which is helpful to make your website more accessible for people with visual impairments.

taught by Tina May

word-spacing can be increased in pixels

You can add the amount of space between each word in pixels.

word-spacing:

Tip: Since pixel is an absolute unit, it will create the same gap between the space and the character regardless of the font size. So if your font size gets bigger, the proportion of that gap will break and the text might look ugly.

Tuition is valuable, but you know what's invaluable? Intuition.

I know what to do. But in a much more real sense, I had no idea what to do.

You miss 100% of the shots you never take.

word-spacing can be set with ems (recommended)

You can use em which is relative to the font size of the element, which means that the word-spacing will change proportionally as the font size changes.

word-spacing:

Tuition is valuable, but you know what's invaluable? Intuition.

I know what to do. But in a much more real sense, I had no idea what to do.

You miss 100% of the shots you never take.

word-spacing can be decreased to squeeze each word together

Conversely, you can reduce the amount of space between each word, by using negative value of pixels or ems.

word-spacing:

Tuition is valuable, but you know what's invaluable? Intuition.

I know what to do. But in a much more real sense, I had no idea what to do.

You miss 100% of the shots you never take.

explore all typography properties

Select any property below and we’ll show you step-by-step how to use the property, with video demo, tips and practical examples you can code for yourself.

color

font-family

font-size

font-style

font-weight

font

letter-spacing

line-height

list-style

text-align

text-decoration

text-indent

text-overflow

text-shadow

text-transform

vertical-align

word-spacing

Try it for yourself

HTML

<div>
  <p class="style-1">Tuition is valuable. But you know what's invaluable? Intuition.</p>
  <p class="style-2">I know what to do. But in a much more real sense, I had no idea what to do.</p>
  <p class="style-3">You miss 100% of the shots you never take.</p>
</div>

Tuition is valuable. But you know what's invaluable? Intuition.

I know what to do. But in a much more real sense, I had no idea what to do.

You miss 100% of the shots you never take.

CSS

.style-1 { word-spacing: 1px; }

.style-2 { word-spacing: 0.5em; }

.style-3 { word-spacing: normal; }

reults

Try adjusting the spacing between words on each paragraph element below. You can increase or decrease the spacing using pixels or ems, or go back to its default spacing using normal.

Try these:

Copyright 2023