CSS Word Spacing – How to Do It Right

Hey everyone! 😃 In this post, we’ll take a look at the CSS property called word spacing. It controls the horizontal distance between words in a text. By default, the CSS word spacing is set to 0px, which is known as normal (word-spacing: normal). If you increase the spacing value, the distance between words will get bigger, while decreasing it will make the spacing smaller.

Let’s take a closer look at this simple yet useful CSS property to gain a better understanding of it.

HTML structure for CSS word spacing

Let’s begin by creating an HTML document. In it, we include three headings <h1> that display the text “Hello World”. The first heading has the class .spacing-normal, the second heading has the class .spacing-big, and the third heading has the class .spacing-small. All headings contain the same text, as it allows an easy comparison. 👌

<h1 class="spacing-normal">Hello World</h1>
<h1 class="spacing-big">Hello World</h1>
<h1 class="spacing-small">Hello World</h1>

CSS structure for CSS word spacing

For our CSS structure, we set the word-spacing property for all three classes and differentiate them by assigning different values.

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

.spacing-big {
  word-spacing: 100px;
}

.spacing-small {
  word-spacing: -50px;
}

The image below illustrates the effect of varying word spacing values on each of our headings. The first heading has normal word spacing, while the second has a larger distance between words due to the increased word spacing value. Similarly, the third heading has a narrower spacing resulting from the decreased value.

🔖 It is important to avoid using word spacing values that are either too large or too small.

In summary, this image illustrates how adjusting the spacing between words can affect the appearance of text. It’s amazing how even small changes can have a significant impact. Isn’t it? 😎

🌼 Hope you found my post helpful. Thanks for being here! 🌼