디자인 아틀라스
EN
Aa 타이포그래피

올캡스 트래킹

All-caps tracking

본문을 전부 대문자로 바꾸면 글자끼리 시각적으로 더 붙어 보입니다 — 소문자의 어센더·디센더가 주던 리듬이 사라지기 때문입니다. 양의 트래킹으로 그 답답함을 풀어주는 관행.

다른 이름: 대문자 자간 보정Uppercase letter-spacing
···
html
<div class="stage">
  <div class="row">
    <div class="tag">tracking 없음</div>
    <div class="badge tight">NEW ARRIVAL</div>
  </div>
  <div class="row">
    <div class="tag good">letter-spacing: 0.12em</div>
    <div class="badge spaced">NEW ARRIVAL</div>
  </div>
</div>
css
.stage{display:grid;gap:18px;justify-items:center}
.row{display:grid;gap:6px;justify-items:center}
.tag{font:10px ui-monospace,Menlo,monospace;color:var(--muted)}
.tag.good{color:var(--accent-3)}
.badge{font:700 clamp(13px,4vmin,18px)/1 -apple-system,system-ui,"Segoe UI",sans-serif;color:var(--fg);text-transform:uppercase;padding:8px 14px;border:1.5px solid var(--fg);border-radius:999px}
.tight{letter-spacing:0}
.spaced{letter-spacing:.12em}

소문자 텍스트는 b·d·h·l 같은 어센더와 g·j·p·q·y 같은 디센더가 위아래로 들쭉날쭉하게 뻗어 있어서 단어의 윤곽이 다채롭고, 그 자체로 읽기 속도를 돕는 "단어 모양" 인식에 쓰입니다. 대문자만 쓰면 모든 글자 높이가 똑같아져 이 윤곽이 사라지고, 상대적으로 글자들이 서로 눌러붙은 듯 빽빽하게 느껴집니다.

그래서 UI 라벨·배지·eyebrow 텍스트처럼 올캡스(전체 대문자)를 쓰는 자리에는 관습적으로 양의 `letter-spacing`(보통 `0.05em~0.15em`)을 함께 줍니다. 대문자 자체가 이미 시선을 끄는 강한 형태이므로, 자간을 넓혀 숨 쉴 공간을 주는 게 오히려 더 차분하고 고급스러운 인상을 줍니다.

이 관행은 라틴·키릴 문자처럼 대소문자 구분(case)이 있는 문자 체계에만 해당합니다. 한글은 애초에 대소문자 구분이 없어서 "올캡스"라는 개념 자체가 없고, 한/영이 섞인 라벨에서는 라틴 부분에만 `text-transform: uppercase`와 트래킹을 적용하고 한글 부분은 그대로 두는 것이 자연스럽습니다.

언제 쓰나

배지, eyebrow 라벨, 버튼처럼 짧은 올캡스 텍스트에는 거의 항상 양의 트래킹을 함께 주세요. 본문 문단 전체를 올캡스로 바꾸는 건 가독성이 크게 떨어지니 피하세요.