word-spacing
word-spacing sets the amount of space between words. It can subtly improve emphasis or rhythm, but it should stay within readable limits.
Overview
word-spacing sets the amount of space between words. It can subtly improve emphasis or rhythm, but it should stay within readable limits.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 1 | 12 | 1 | 1 | 18 | 1 | |
normal | 1 | 12 | 1 | 1 | 18 | 1 |
| Other | ||||||
| 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
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
Powered by web-features