letter-spacing
글자 사이의 간격을 조절합니다. 대문자 레이블에 넓은 간격을 주거나, 큰 제목을 좁게 조이는 등 타이포그래피의 디테일을 다듬을 때 사용합니다.
클래스 목록
| <tr> <th class="tal py12px px16px bg18181B bb2pxsolid27272A cA1A1AA fw600 ttu fs12px ls0-05em">클래스 | CSS | 설명 |
|---|---|---|
ls1px | letter-spacing: 1px | 1px 글자 간격 |
ls2px | letter-spacing: 2px | 2px 글자 간격. 넓은 장식 효과 |
ls0-05em | letter-spacing: 0.05em | font-size의 5%. 대문자 레이블 표준 |
ls0-1em | letter-spacing: 0.1em | font-size의 10%. 넓은 장식 효과 |
ls0-2em | letter-spacing: 0.2em | font-size의 20%. 매우 넓은 간격 |
neg-ls0-5px | letter-spacing: -0.5px | 약간 좁은 간격. 큰 제목에 사용 |
neg-ls1px | letter-spacing: -1px | 좁은 간격. 타이트한 헤딩에 사용 |
시각적 비교
같은 텍스트에 서로 다른 letter-spacing을 적용한 결과를 비교합니다.
letter-spacing: -1px — neg-ls1px
Typography Design
letter-spacing: -0.5px — neg-ls0-5px
Typography Design
기본 (letter-spacing 없음) —
Typography Design
letter-spacing: 1px — ls1px
Typography Design
letter-spacing: 2px — ls2px
Typography Design
letter-spacing: 0.1em — ls0-1em
Typography Design
letter-spacing: 0.2em — ls0-2em
TYPOGRAPHY DESIGN
자주 쓰는 값
용도에 따라 적절한 letter-spacing 값을 선택하세요.
| <tr> <th class="tal py12px px16px bg18181B bb2pxsolid27272A cA1A1AA fw600 ttu fs12px ls0-05em">용도 | 권장 클래스 | 설명 |
|---|---|---|
| Uppercase label | ls0-05em | ttu와 함께 사용. 가장 일반적인 대문자 간격 |
| Wide uppercase heading | ls0-1em | ttu와 함께 사용. 장식적 효과가 강한 간격 |
| Fixed wide spacing | ls1px ~ ls2px | font-size와 무관한 고정 간격 |
| Tight large heading | neg-ls0-5px | 큰 제목의 글자를 약간 모아 밀도감 부여 |
| Very tight heading | neg-ls1px | 로고, 히어로 텍스트 등 강한 밀도감 |
대문자 레이블 패턴
letter-spacing은 ttu(text-transform: uppercase)와 함께 사용하는 것이 가장 일반적입니다. 대문자 텍스트는 글자 간격을 넓혀야 가독성이 좋아집니다.
표준 라벨 스타일 — ttu fs12px fw600 ls0-05em cA1A1AA
section title
이 패턴은 섹션 라벨, 테이블 헤더, 카테고리 태그 등에 사용됩니다.
status
letter-spacing 없이 vs 있을 때
without letter-spacing
기본 간격 — 대문자가 빽빽하게 느껴집니다
with letter-spacing 0.05em
넓은 간격 — 대문자가 편안하게 읽힙니다
with letter-spacing 0.1em
더 넓은 간격 — 장식적 효과가 강합니다
<!-- Standard Uppercase label Pattern -->
<p class="ttu fs12px fw600 ls0-05em cA1A1AA">section title</p>
<!-- Table header -->
<th class="ttu fs12px fw600 ls0-05em cA1A1AA">column name</th>
<!-- Wide decorative label -->
<p class="ttu fs12px fw600 ls0-1em cA1A1AA">featured</p>
<!-- Category tag -->
<span class="ttu fs12px fw600 ls0-05em c6366F1 bg99-102-241-10 py4px px8px br4px">
category
</span>음수 letter-spacing
큰 제목이나 로고 텍스트에서 글자를 촘촘하게 모아 시각적 밀도를 높일 때 음수 값을 사용합니다.
기본 간격
Heading
음수 간격 — neg-ls0-5px
Heading
더 좁은 간격 — neg-ls1px
Heading
<!-- Negative spacing for large titles -->
<h1 class="fs4-8rem fw800 neg-ls0-5px cFAFAFA lh1-2">
Hero Title
</h1>
<!-- Tighter title -->
<h1 class="fs4-8rem fw800 neg-ls1px cFAFAFA lh1-2">
Tight Heading
</h1>실제 사용 예시
<!-- Uppercase label + Body text -->
<div>
<p class="ttu fs12px fw600 ls0-05em cA1A1AA mb8px">description</p>
<p class="fs16px lh1-7 c71717A">Body text content.</p>
</div>
<!-- Tight hero title -->
<h1 class="fs4-8rem fw800 neg-ls0-5px cFAFAFA lh1-2 mb16px">
Build faster
</h1>
<!-- Wide-spaced subtitle -->
<p class="ttu fs14px fw600 ls0-1em c6366F1 mb2rem">
atomic css framework
</p>
<!-- Card header label -->
<div class="bg18181B p2rem br8px">
<p class="ttu fs12px fw600 ls0-05em cA1A1AA mb8px">pricing</p>
<p class="fs3-2rem fw800 cFAFAFA lh1-2">$29/mo</p>
</div>팁 & 주의사항
em 단위는 font-size에 비례합니다
ls0-05em은 font-size가 12px이면 0.6px, 20px이면 1px이 됩니다. 반응형으로 font-size가 변하는 경우 em 단위가 유리합니다.
음수 값은 큰 텍스트에 사용
neg-ls는 큰 제목이나 로고 텍스트를 단단하게 조일 때 효과적입니다. 작은 본문에는 가독성을 해칠 수 있으므로 피하세요.
ttu와 자주 함께 사용됩니다
대문자 텍스트(ttu)는 글자 간격을 넓혀야 가독성이 향상됩니다. ttu fs12px fw600 ls0-05em 조합은 레이블의 표준 패턴입니다.