Ch.6 타이포그래피 시스템
수직 리듬과 행간·행폭
같은 서체, 같은 크기인데 왜 어떤 글은 읽기 쉽고 어떤 글은 힘들까?
디자인 리뷰에서 '글자 크기는 맞는데, 읽기가 불편하다'는 피드백을 받았습니다. 서체도 좋고 크기도 적절한데 뭐가 문제일까? 답은 '줄 사이의 공간'과 '줄의 길이'에 있습니다.
서체와 크기만 잘 정하면 타이포그래피는 끝난 게 아닌가?
서체 선택이 '무엇'이라면, 행간·행폭·자간은 '어떻게' 배치하느냐의 문제입니다. 이 세 가지가 읽기 경험(readability)을 결정합니다.
핵심 내용
행간은 '글자 크기'만큼 중요한 타이포 설정입니다
행간(line-height)은 텍스트 줄 사이의 수직 간격입니다. 행간이 너무 좁으면 글자가 겹쳐 보이고, 너무 넓으면 줄 간의 연결이 끊어져 읽기 흐름이 방해됩니다.
핵심 원칙: 글자가 클수록 행간 비율을 줄이고, 글자가 작을수록 행간 비율을 늘린다
한 줄에 몇 글자가 들어가느냐가 읽기 속도를 결정합니다
행폭(Measure)은 한 줄의 텍스트 길이입니다. 줄이 너무 길면 다음 줄의 시작점을 찾기 어렵고, 너무 짧으면 시선이 계속 끊깁니다.
행폭 45~75자 법칙
자간(Letter-spacing/Tracking) — 글자 사이의 수평 간격입니다. • 대형 텍스트(40px+): 자간을 -0.5~-1.5% 줄임 → 덩어리감 강화 • 본문(14~18px): 기본값(0) 유지 → 서체 디자이너의 의도 존중 • 소형 텍스트(12px 이하): +1~2% 넓힘 → 글자 분리 향상
8px 기준선 그리드와의 연결 Ch2에서 배운 8px 그리드는 타이포에도 적용됩니다. • 본문 16px × line-height 1.5 = 24px (8의 배수 ✓) • H2 25px × line-height 1.28 ≈ 32px (8의 배수 ✓) • 모든 텍스트의 줄 높이를 8의 배수로 맞추면 → 수직 리듬(Vertical Rhythm) 달성
미세한 설정 차이가 읽기 경험을 완전히 바꿉니다
본문 텍스트(16px)의 권장 행간(line-height) 범위는?
한 줄에 100자 이상 들어가면 가독성이 크게 떨어진다
대형 제목(40px+)의 자간은 본문보다 넓게 설정해야 한다
핵심 용어
본문 (Body)
1.4 ~ 1.6 — 장문 읽기에 최적. 1.5가 가장 범용적
제목 (H1~H3)
1.1 ~ 1.3 — 글자가 크면 행간을 줄여야 덩어리감 유지
캡션/라벨
1.3 ~ 1.5 — 짧은 텍스트는 약간 넉넉하게
모바일 본문
1.5 ~ 1.7 — 작은 화면에서는 0.1~0.2 추가
비교 정리
| 항목 | 최적 설정 | 비최적 설정 |
|---|---|---|
| 본문 행간 | line-height: 1.5 → 줄 사이 충분한 공기 | line-height: 1.0 → 줄이 붙어서 답답함 |
| 제목 행간 | line-height: 1.2 → 제목이 하나의 덩어리 | line-height: 1.6 → 제목이 흩어져 보임 |
| 행폭 | max-width: 65ch → 편안한 독서 리듬 | max-width: 없음 → 모니터 전체 폭 = 줄 추적 실패 |
| 대형 제목 자간 | letter-spacing: -1% → 촘촘하고 임팩트 있음 | letter-spacing: +2% → 글자가 흩어져 힘없는 느낌 |
타이포그래피의 완성은 서체 선택이 아니라 행간·행폭·자간의 세밀한 조정에 있다
핵심 정리
- 1행간(line-height): 본문 1.4~1.6, 제목 1.1~1.3
- 2핵심 원칙: 글자가 클수록 행간 비율↓, 작을수록 행간 비율↑
- 3행폭(measure): 45~75자 최적, 65ch가 가장 보편적
- 4자간(letter-spacing): 큰 글자 → 좁히고, 작은 글자 → 넓히기
- 5수직 리듬: 모든 줄 높이를 8px 배수로 맞추면 정돈된 리듬 완성
퀴즈와 인터랙션으로 더 깊이 학습하세요
play_circle인터랙티브 레슨 시작