uiux·발행 2026.07.12
Kerning, 라틴어 cardo, 활자 사이의 간격
글자와 글자 사이의 미세한 간격 조정입니다. 디자이너가 매일 싸우는 이 작업의 어원은 라틴어로 "축, 경첩"이라는 의미입니다.
한 줄로
글자와 글자 사이의 미세한 간격 조정입니다. 디자이너가 매일 싸우는 이 작업의 어원은 라틴어로 "축, 경첩"입니다.
어디서 왔나
라틴어 cardo = "축, 경첩, 모서리"입니다. 이 단어가 프랑스어 carne을 거쳐 영어 kern이 됐습니다. 본래 의미는 활자의 몸체에서 옆으로 돌출된 부분입니다.
활판 인쇄 시대에 모든 글자는 사각형 금속 블록에 새겨져 있었습니다. 그런데 일부 글자(f, j, y의 꼬리)는 사각 블록 밖으로 살짝 튀어나와야 자연스러웠습니다. 그 튀어나온 부분을 kern이라 불렀고, 다음 글자와의 간격 조정을 kerning이라 했습니다.
디지털 폰트에서는 더 정교해졌습니다. 모든 글자 쌍(AV, WA, To, Ty 등) 사이의 자연스러운 간격이 폰트 파일 안에 사전 정의돼 있습니다. 디자이너는 그 기본 kerning을 사용하거나 수동으로 조정합니다.
왜 중요한가
같은 단어인데 kerning이 달라지면 완전히 다르게 읽힙니다.
- "AVATAR" (자동 kerning): A-V 사이가 적당히 좁아 자연스러움.
- "A V A T A R" (kerning 없음): 각 글자가 분리돼 보이고, 단어로 안 읽힘.
특히 로고 디자인과 헤드라인에서 kerning이 결정적입니다. 작은 본문 텍스트는 폰트의 기본 kerning으로 충분하지만, 큰 글자는 사람 눈에 띄어서 조정이 필수입니다.
디지털 도구
- CSS:
letter-spacing속성. 다만 글자 쌍별이 아니라 일괄 적용. - Figma / Sketch: 글자별 미세 조정 가능.
- Adobe Illustrator: 가장 정밀한 kerning 도구.
- InDesign: Optical kerning vs Metric kerning 선택.
Tracking과의 차이
- Kerning: 두 글자 사이의 개별 간격.
- Tracking: 단어 전체 또는 문단의 균일한 간격.
큰 글자에서는 kerning을 조정하지만, 소문 텍스트에서는 tracking으로 전반적 간격을 조정합니다.
바이브 메이커가 챙길 한 가지
로고, 헤드라인, 큰 제목에서 글자가 어색하게 붙거나 떨어져 있다면 거의 항상 kerning 문제입니다. Figma에서 글자 한 자씩 좌우 화살표로 조정해 보면 미묘하게 다른 느낌이 나옵니다. 0.5px의 차이가 전문성의 차이를 만듭니다.
관련
Tracking · Leading · Typography
Comments
댓글 0
로그인 상태 확인 중…
댓글 불러오는 중…