Typography
word-spacing
Adjust the extra spacing between words without changing letter spacing.
Overview
| Class | Declarations |
|---|---|
word-spacing:<value> | word-spacing: <value>;
|
Examples
Add space between words
word-spacing adjusts the normal space between words. An em value follows the element’s font size; it does not change the distance between every pair of letters.
Add space between words
The value adds to the normal word separator. Compare the same content at the same size to isolate the effect.
<!-- word-spacing:0 --><p id="target" class="inline-block m:0 font-md leading-md word-spacing:0">Make room for ideas.</p><!-- word-spacing:.25em --><p id="target" class="inline-block m:0 font-md leading-md word-spacing:.25em">Make room for ideas.</p>Use fixed spacing when needed
A length adds the same amount to each word separator regardless of type size. These two samples add 4px per space, while their glyphs use different sizes.
Use fixed spacing when needed
The value adds to the normal word separator. Compare the same content at the same size to isolate the effect.
<!-- font-sm · +4px per space --><p id="target" class="inline-block m:0 font-sm leading-md word-spacing:4px">Make room for ideas.</p><!-- font-xl · +4px per space --><p id="target" class="inline-block m:0 font-xl leading-md word-spacing:4px">Make room for ideas.</p>Avoid overusing wide spacing
Large word gaps can break the visual continuity of a paragraph. Compare the same line width and content with no extra spacing and a deliberately wide setting.
Avoid overusing wide spacing
The value adds to the normal word separator. Compare the same content at the same size to isolate the effect.
<!-- word-spacing:0 --><p id="target" class="max-w:24ch m:0 font-md leading-md word-spacing:0">Clear type gives each idea room to breathe. Keep the measure comfortable and let the content set the pace.</p><!-- word-spacing:.5em --><p id="target" class="max-w:24ch m:0 font-md leading-md word-spacing:.5em">Clear type gives each idea room to breathe. Keep the measure comfortable and let the content set the pace.</p>word-spacing:0 keeps the font’s normal spaces; it does not remove whitespace from the text.
Apply conditionally
Hover or keyboard-focus the button to add word spacing. The content and letter spacing remain unchanged.
Apply conditionally
The value adds to the normal word separator. Compare the same content at the same size to isolate the effect.
<!-- Pointer and keyboard states --><button type="button" id="target" class="font-md word-spacing:0 word-spacing:.25em:hover word-spacing:.25em:focus-visible">Make room for ideas.</button>