word-spacing

Definition

The word-spacing CSS property is used to control the amount of space between words in a block of text. It allows you to adjust the spacing between words to achieve a desired visual appearance or to improve readability.

The word-spacing property accepts length values or the normal keyword.

• Length values, such as px, em, or rem, specify a specific amount of space to be added between words. Positive values increase the spacing, while negative values decrease it.
• The normal keyword uses the default spacing between words.

Here’s an example:

.spaced-text {
  word-spacing: 2px;
}

In this example, the .spaced-text class sets the word-spacing property to 2px, adding 2 pixels of space between words.

It’s important to note that the word-spacing property affects only the spacing between words, not other spacing properties like letter-spacing or line-height. Additionally, the property applies to words within the same line, not across line breaks or between elements.

The word-spacing property is commonly used to fine-tune the spacing between words, especially when dealing with typography and layout adjustments. It can be helpful in cases where the default word spacing is too tight or too loose for a particular design or readability requirement.

Keep in mind that excessive word spacing may negatively affect readability, so it’s essential to strike a balance and ensure that the adjusted spacing enhances the overall appearance and legibility of the text.

Syntax

p {
  word-spacing: 0.2em;
}

Values

• normal: browser default spacing.
• <length>: add or subtract spacing between words.

Practical Examples

p {
  word-spacing: 0.25em;
}

Adjust spacing in uppercase navigation or display type for visual balance.

<div class="grid gap-4 sm:grid-cols-2 text-sm font-semibold uppercase tracking-wide text-slate-700">
  <p class="rounded-xl border border-slate-200 bg-white p-4 shadow-sm">Account Settings</p>
  <p class="rounded-xl border border-slate-200 bg-white p-4 shadow-sm" style="word-spacing: 0.35em;">Account Settings</p>
</div>

Tips & Best Practices

• Use sparingly; too much spacing can make words feel disconnected.
• Combine with letter-spacing when styling all-caps navigation.
• Adjust per breakpoint if spacing feels excessive on narrow screens.

Accessibility & UX Notes

Maintain readability—excessive spacing can slow reading speed.

Browser Support

Supported globally.

Related

• letter-spacing for character-level adjustments.
• text-transform when styling uppercase text.
• text-align to control justification alongside spacing.