What is word spacing and how does it affect readability?

Word spacing is the amount of horizontal space between words in a line of text. Its default size comes from the width of the space character in the font, which the type designer sets to suit the typeface, often somewhere around a quarter of the font size. In CSS you can change it with the word-spacing property, which adds or removes a length from every word space. Word spacing affects readability because readers recognise words partly by their overall shape: gaps that are too small make words run together, gaps that are too large break lines into isolated words and create distracting rivers of white space. For most body text, the font's default spacing with left-aligned text is the best choice, and the main time you'll adjust it is to balance letter spacing changes or fix justified text.

Word spacing gets far less attention than letter spacing or line height, but it causes some of the most visible typographic problems on the web, particularly in justified text and narrow columns. In this article you'll learn how word spacing is defined in fonts and CSS, how alignment and justification change it, when adjusting it helps, how to use special space characters, and how word spacing relates to accessibility requirements.

How Word Spacing Is Set

In the Font

Every font contains a space character with an advance width. There's no universal standard for that width. Typefaces with wide letters usually have wider spaces, and condensed typefaces usually have narrower ones. The designer chooses a value that keeps words distinct while keeping lines cohesive.

You can check a font's space width with the fonttools Python package:

pip install fonttools
python3 -c "
from fontTools.ttLib import TTFont
font = TTFont('SourceSerif4-Regular.ttf')
upm = font['head'].unitsPerEm
space = font.getBestCmap()[0x20]
width = font['hmtx'][space][0]
print(f'units per em: {upm}')
print(f'space width: {width} ({width / upm:.3f} em)')
"

units per em: 1000
space width: 250 (0.250 em)

The numbers above are illustrative; run the script on your own font file to see its real values. Comparing the space width of two candidate typefaces is a quick way to understand why one sets more openly than the other.

In CSS

The word-spacing property adds to the font's default space:

p {
  word-spacing: normal;   /* the font's own space width */
}

.airy {
  word-spacing: 0.05em;   /* adds 0.05em to every word space */
}

.compact {
  word-spacing: -0.02em;  /* removes 0.02em from every word space */
}

Like letter-spacing, it's best expressed in em so the change scales with the font size. It applies to word-separator characters, mainly the ordinary space and the no-break space. Like other spacing values, it's inherited as a computed length, so set it on the elements that need it.

Why Word Spacing Affects Readability

Readers don't decode text one letter at a time. Experienced readers take in groups of letters at each pause and use the spaces between words to work out where each word begins and ends. Word spacing is the signal that separates units of meaning.

When Spaces Are Too Tight

• Words merge: Short words such as "of", "in" and "to" start to attach to their neighbours.
• Lines look dense: Paragraphs turn into a dark, uniform block that's tiring to read.
• Word boundaries blur at small sizes: The effect is worse in small or bold text.

When Spaces Are Too Loose

• Lines fall apart: Each word becomes an island, and the eye reads in a stop-start rhythm.
• Rivers appear: Gaps in consecutive lines line up into vertical or diagonal channels of white space running down the paragraph.
• Word spacing exceeds line spacing: If the gap between words gets close to the gap between lines, the eye can be pulled down the page instead of across it.

A good rule of thumb from print typography is that word spaces should be clearly smaller than the space between lines. If your word spacing ever looks comparable to your line spacing, something's wrong.

Alignment and Word Spacing

Text alignment has a direct effect on word spacing.

Left-Aligned Text

With text-align: start or left, every word space has the same width. Lines end at different points, creating a ragged right edge, but the texture of each line is even. This is why left-aligned text is the safest choice for body text on the web.

Justified Text

With text-align: justify, the browser stretches each line except the last to fill the full width. It does this mainly by enlarging word spaces. On a wide column with long lines, the variation is small and can look neat. On narrow columns, or with long words, some lines may end up with very large gaps.

/* Risky on narrow screens */
.article p {
  text-align: justify;
}

To make justified text work better, enable hyphenation so long words can break, and only justify when the column is wide enough:

<html lang="en-GB">

@media (min-width: 48rem) {
  .article p {
    text-align: justify;
    hyphens: auto;
    hyphenate-limit-chars: 6 3 3;
  }
}

hyphens: auto needs a correct lang attribute on the page or element, because hyphenation rules are language specific. hyphenate-limit-chars sets the minimum word length and the minimum characters before and after a hyphen; support isn't universal yet, and browsers that don't support it simply ignore it.

The text-justify property can tell the browser how to distribute the extra space, for example inter-word to stretch only word spaces or inter-character to spread it between letters too. Browser support for text-justify varies, so check before relying on it.

WCAG 2.2 Success Criterion 1.4.8, Visual Presentation, at Level AAA, asks that text isn't justified, because uneven spacing makes reading harder for some people, including some readers with dyslexia. For a full comparison, see left-aligned vs justified text.

Centred Text

Centred text keeps even word spacing but has ragged edges on both sides, which makes it hard to find the start of each line. Keep it for short headings, captions and calls to action.

When to Adjust Word Spacing

Most body text should stay at normal. A few situations justify a change.

After Changing Letter Spacing

When you add letter spacing, the gaps between letters grow, but word spaces stay the same relative size. Words can start to blend together, especially in all-caps labels. Increasing word spacing in proportion restores the separation:

.nav-link {
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  word-spacing: 0.08em;
}

The reverse also applies. If you tighten letter spacing on a large headline, you can tighten word spacing a little so it doesn't look gappy:

.headline {
  font-size: clamp(2.5rem, 2rem + 3vw, 4rem);
  letter-spacing: -0.02em;
  word-spacing: -0.03em;
}

For more on those letter spacing values, see letter spacing and when to adjust it.

Large Display Text

At large sizes, the font's default space can look wider than intended because the eye judges space relative to the overall line. A small negative word spacing often helps hero headings feel more like a unit. Make changes in very small steps, around 0.01em to 0.05em, and stop before words start to touch.

Typefaces With Unusual Default Spaces

Some display fonts, especially free fonts or older conversions, have spaces that are noticeably too wide or too narrow. If a typeface looks fine in single words but strange in sentences, the space width may be the cause. A small word-spacing adjustment can correct it without changing fonts.

Monospace Text

In monospace fonts, the space is the same width as every other character, which is wide compared with proportional fonts. This is necessary for alignment in code, so don't change word spacing in code blocks or other places where columns need to line up.

Special Space Characters

Unicode includes several space characters with different widths and behaviours. They're useful for fine typographic control without CSS:

Character	Code point	HTML	Use
No-break space	U+00A0	 	Prevents a line break between two words, such as "10 kg" or "Mr Smith"
Narrow no-break space	U+202F	 	Thin space that doesn't break; used before some punctuation in French and between numbers and units in some styles
Thin space	U+2009	 	Narrow space, for example around an em dash or between digit groups
Hair space	U+200A	 	Very narrow space, used for fine adjustments
Em space	U+2003	 	A space one em wide
Zero-width space	U+200B	​	No visible space, but allows a line break, useful in long URLs

For example, to keep a number and unit together and add a thin space around an em dash:

<p>The parcel weighs 12&nbsp;kg.</p>
<p>The answer&thinsp;—&thinsp;as you might expect&thinsp;—&thinsp;depends on the font.</p>
<p>Visit https://example.com/&#8203;very/&#8203;long/&#8203;path for details.</p>

Double Spaces After Sentences

HTML collapses runs of ordinary spaces into one by default, so typing two spaces after a full stop has no effect in normal paragraphs. That's in line with modern typographic practice, which uses a single word space between sentences. If you need to preserve spaces, for example in poetry or preformatted text, use white-space: pre-wrap:

.poem {
  white-space: pre-wrap;
}

Word Spacing and Accessibility

WCAG 2.2 Success Criterion 1.4.12, Text Spacing, at Level AA, requires that content still works when users set word spacing to at least 0.16 times the font size, together with letter spacing of 0.12em, line height of 1.5 and paragraph spacing of 2em. Some readers, including some people with dyslexia or low vision, find increased spacing makes text easier to read, and they apply it with browser extensions or user stylesheets.

Increased word spacing makes lines wider, so the risks are in tight containers:

• Buttons and tabs with fixed widths: Text may overflow or be clipped.
• Single-line navigation: Items may wrap or be pushed off-screen.
• Truncated text: Ellipsis truncation may hide important words.

You can test with a quick user style in DevTools:

* {
  word-spacing: 0.16em !important;
  letter-spacing: 0.12em !important;
  line-height: 1.5 !important;
}

To make layouts resilient:

.tab {
  min-width: 6rem;      /* not a fixed width */
  padding: 0.5rem 1rem; /* not a fixed height */
  white-space: normal;  /* allow wrapping if needed */
}

.nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
}

Spotting Word Spacing Problems

A few checks quickly reveal most issues:

1. Squint at a paragraph: If you see white channels running down through the lines, you have rivers, usually from justification.
2. Read a narrow column on a phone: Look for lines with only two or three widely spaced words.
3. Check all-caps labels: Make sure the words in multi-word labels are still clearly separate.
4. Compare word and line spacing: Gaps between words should look clearly smaller than the space between lines.
5. Test with spacing overrides: Apply the WCAG values and check for overflow and clipping.

---

FAQ: Word Spacing

---

Conclusion

Word spacing is the gap between words, set by the width of the space character in the font and adjustable in CSS with word-spacing. It shapes readability because readers use word gaps to find word boundaries: too tight and words run together, too loose and lines break into isolated words and rivers of white space.

For body text, trust the font and use left-aligned text. Adjust word spacing in step with letter spacing for all-caps labels and large headlines, enable hyphenation if you justify text on wide columns, and use special space characters like the no-break and thin space for fine control. Finally, make sure your layout survives users' own spacing overrides, so everyone can read your text the way that works best for them.