Tracking, 단어 전체의 균일한 자간

한 줄로

문단, 단어 전체의 글자 간격을 균일하게 조정합니다. Kerning이 글자 쌍 단위라면, tracking은 글자 그룹 단위입니다.

어디서 왔나

영어 "tracking"의 어원은 그 자체로 직관적입니다. track(자국, 경로)에서 파생됐습니다. 활자가 한 줄로 균일하게 늘어선 모습을 "트랙"으로 본 비유입니다.

기술적으로는 leading(줄 간격), kerning(글자 쌍 간격)과 함께 타이포그래피의 3대 간격 조정 중 하나입니다. 사진 식자(phototypesetting) 시대인 1960년대에 표준 용어로 정착했습니다.

Kerning과의 차이

• Kerning: 두 글자 사이만 (예: A-V).
• Tracking: 단어/문단 전체 균일하게.

차이 예시는 단어 "DESIGN"입니다.

• 기본: D-E-S-I-G-N
• Tracking +20: D · E · S · I · G · N (전체적으로 넓어짐)
• A-V kerning만 조정: 다른 글자 쌍은 그대로

언제 tracking을 쓰나

Tracking을 늘릴 때 (양수)입니다.

• 대문자 전용 텍스트: "WELCOME", "MENU". 대문자는 좁게 보이므로 살짝 늘려야 자연스러움.
• 고급스러운 느낌: 럭셔리 브랜드의 로고는 보통 tracking이 +50~150.
• 헤드라인 강조: 한 단어를 강조하려면 살짝 늘림.

Tracking을 줄일 때 (음수)입니다.

• 매우 큰 글자: 디스플레이 폰트는 기본 간격이 너무 넓어 보임. -10~-30 정도 줄여서 정렬.
• 공간이 좁을 때: 카드의 좁은 너비에 글자가 안 들어가면.

CSS에서

.heading {
  letter-spacing: 0.05em;  /* +5 tracking */
}
.large-display {
  letter-spacing: -0.02em; /* -2 tracking */
}

em 단위를 쓰는 게 폰트 크기에 비례해 자동 조정되므로 권장합니다.

Anti Card 5원칙과

브랜드의 5원칙 중 하나가 "smallcaps" 사용입니다. 작은 대문자는 거의 항상 tracking 조정이 필요합니다. 기본 폰트의 smallcaps는 보통 너무 좁습니다.

바이브 메이커가 챙길 한 가지

본문 텍스트는 보통 letter-spacing을 건드리지 않습니다. 헤드라인과 대문자 전용 텍스트에서만 의미 있습니다. 작은 본문에 tracking을 늘리면 글이 흐트러져 보입니다.

관련

Kerning · Leading · Typography