word-spacing
Adjusts spacing between words. Not commonly used but useful for art direction or special typography.
Class List
Pattern: ws{N}px, ws{N}rem, ws{N}em — freely combine numbers and units.
| Class | CSS | Description |
|---|---|---|
ws2px | word-spacing: 2px | Subtle extra word spacing |
ws4px | word-spacing: 4px | Slight extra word spacing |
ws1rem | word-spacing: 1rem | Wide word spacing (10px) |
ws2rem | word-spacing: 2rem | Very wide word spacing (20px) |
Visual Comparison
See word spacing gradually increase.
Default —
The quick brown fox jumps over the lazy dog
2px — ws2px
The quick brown fox jumps over the lazy dog
4px — ws4px
The quick brown fox jumps over the lazy dog
1rem (10px) — ws1rem
The quick brown fox jumps over the lazy dog
2rem (20px) — ws2rem
The quick brown fox jumps over the lazy dog
Naming Confusion Warning
The ws prefix means different properties depending on unit presence.
| Class | Property | How to distinguish |
|---|---|---|
ws2px | word-spacing: 2px | 숫자 + 단위 = word-spacing |
ws1rem | word-spacing: 1rem | 숫자 + 단위 = word-spacing |
wsn | white-space: nowrap | 알파벳만 = white-space |
wsp | white-space: pre | 알파벳만 = white-space |
Class Details
ws2pxword-spacing: 2px
Adds 2px extra word spacing. For subtle readability adjustment.
<!-- Subtle word gap -->
<p class="ws2px fs16px cFAFAFA">
The quick brown fox jumps over the lazy dog
</p>ws4pxword-spacing: 4px
Adds 4px extra word spacing. For clearer word separation.
<!-- Slightly wider word gap -->
<p class="ws4px fs16px cFAFAFA">
The quick brown fox jumps over the lazy dog
</p>ws1remword-spacing: 1rem
Adds 1rem (10px) wide word spacing. For hero sections or art typography.
<!-- Hero typography -->
<h1 class="ws1rem fs3-6rem fw800 cFAFAFA ttu tac">
Design System
</h1>ws2remword-spacing: 2rem
Adds 2rem (20px) very wide word spacing. For dramatic typographic effects.
<!-- Dramatic typography -->
<h1 class="ws2rem fs3-6rem fw800 cFAFAFA ttu tac">
W I D E
</h1>Tips & Notes
word-spacing vs letter-spacing
ws (with unit) = word spacing, ls = letter spacing. Most readability adjustments use letter-spacing.
wsn is white-space: nowrap!
wsn is white-space: nowrap, not word-spacing. word-spacing must include a unit.