word-spacing

단어 사이의 간격을 조절합니다. 일반적으로 자주 사용되지는 않지만, 아트 디렉션이나 특수한 타이포그래피 연출에 유용합니다.

클래스 목록

패턴: ws{N}px, ws{N}rem, ws{N}em — 숫자와 단위를 자유롭게 조합합니다.

클래스	CSS	설명
`ws2px`	word-spacing: 2px	미세한 단어 간격 추가
`ws4px`	word-spacing: 4px	약간의 단어 간격 추가
`ws1rem`	word-spacing: 1rem	넓은 단어 간격 (10px)
`ws2rem`	word-spacing: 2rem	매우 넓은 단어 간격 (20px)

시각적 비교

단어 간격이 점점 넓어지는 모습을 확인하세요.

기본값 —

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

네이밍 혼동 주의

ws 접두사는 단위 유무에 따라 완전히 다른 속성입니다.

클래스	속성	구분법
`ws2px`	word-spacing: 2px	숫자 + 단위 = word-spacing
`ws1rem`	word-spacing: 1rem	숫자 + 단위 = word-spacing
`wsn`	white-space: nowrap	알파벳만 = white-space
`wsp`	white-space: pre	알파벳만 = white-space

클래스별 상세

`ws2px`word-spacing: 2px

단어 사이에 2px의 추가 간격을 부여합니다. 미세한 가독성 조정에 사용합니다.

<!-- 미세한 단어 간격 -->
<p class="ws2px fs16px cFAFAFA">
  The quick brown fox jumps over the lazy dog
</p>

`ws4px`word-spacing: 4px

단어 사이에 4px의 추가 간격을 부여합니다. 좀 더 명확한 단어 구분이 필요할 때 사용합니다.

<!-- 약간 넓은 단어 간격 -->
<p class="ws4px fs16px cFAFAFA">
  The quick brown fox jumps over the lazy dog
</p>

`ws1rem`word-spacing: 1rem

단어 사이에 1rem(10px)의 넓은 간격을 부여합니다. 히어로 섹션이나 아트 타이포그래피에 활용합니다.

<!-- 히어로 타이포그래피 -->
<h1 class="ws1rem fs3-6rem fw800 cFAFAFA ttu tac">
  Design System
</h1>

`ws2rem`word-spacing: 2rem

단어 사이에 2rem(20px)의 매우 넓은 간격을 부여합니다. 극적인 타이포그래피 효과에 사용합니다.

<!-- 극적인 타이포그래피 -->
<h1 class="ws2rem fs3-6rem fw800 cFAFAFA ttu tac">
  W I D E
</h1>

팁 & 주의사항

word-spacing vs letter-spacing

ws(단위 있음)는 단어 사이 간격, ls는 글자 사이 간격입니다. 대부분의 가독성 조정은 letter-spacing으로 충분합니다.

wsn은 white-space: nowrap!

wsn은 word-spacing이 아닌 white-space: nowrap입니다. 혼동하지 마세요. word-spacing에는 반드시 단위를 포함하세요.

letter-spacing white-space text-indent