Word Spacing

Word spacing guidelines for improved readability.

CSS Word Spacing

Tailwind doesn't include word-spacing utilities by default, but you can use custom CSS:

.word-spacing-tight { word-spacing: -0.05em; }
.word-spacing-normal { word-spacing: normal; }
.word-spacing-wide { word-spacing: 0.1em; }
.word-spacing-wider { word-spacing: 0.25em; }

When to Adjust

Word spacing is rarely needed, but useful for:

All-Caps Text

Uppercase text often benefits from slightly wider word spacing:

<span class="uppercase tracking-wider" style="word-spacing: 0.1em;">
  SPACED CAPS TEXT
</span>

Justified Text

Justified text may need tighter word spacing to prevent rivers:

<p class="text-justify" style="word-spacing: -0.02em;">
  Justified paragraph text...
</p>

Best Practices

1. Default is fine - Word spacing rarely needs adjustment
2. Use with tracking - Combine with letter-spacing for all-caps
3. Subtle changes - Small values like 0.05em or 0.1em
4. Test thoroughly - Check different line lengths

Tailwind Extension

Add to tailwind.config.ts:

theme: {
  extend: {
    spacing: {
      'word-tight': '-0.05em',
      'word-wide': '0.1em',
    }
  }
}

Then create utilities:

@layer utilities {
  .word-spacing-tight { word-spacing: -0.05em; }
  .word-spacing-wide { word-spacing: 0.1em; }
}