Widely available Useful for typographic tuning and emphasis, but small, measured changes are usually enough.

word-spacing

The word-spacing CSS property sets the spacing between words and between tags.

TypographySpacingText

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
word-spacing
1
12
1
1
18
1
normal
1
12
1
1
18
1
Other
svg.global_attributes.word-spacing

The word-spacing attribute specifies spacing behavior between words.
1
12
1
1
18
1
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)

Syntax

CSS 
.wide-spacing {
  word-spacing: 0.3em;
}
.tight-spacing {
  word-spacing: -0.05em;
}

Live demo

Normal(default)

CSS Normal(default) demo.

PreviewFullscreen

Widespacing(0.3em)

CSS Widespacing(0.3em) demo.

PreviewFullscreen

Narrowspacing(-0.05em)

CSS Narrowspacing(-0.05em) demo.

PreviewFullscreen

Use cases

  • Readable dense copy

    Tweak word spacing in headings or compact blocks when the default font metrics feel cramped.

  • Display text styling

    Add controlled spacing to banners or labels when the design calls for a more open rhythm.

Cautions

  • Large spacing values can make normal reading noticeably slower.
  • Spacing adjustments should be tested with the actual font, size, and line length in use.

Accessibility

  • Text spacing choices affect readability, especially for users with dyslexia or low vision.
  • Avoid decorative spacing that weakens word grouping or makes scanning harder.

Related links