통합 요약노트
Ch.6 타이포그래피 시스템
모듈러 스케일, 수직 리듬, 가독성 법칙
이 챕터의 내용
서체 해부학과 선택 기준
서체의 해부학적 구조를 이해하면, 왜 특정 서체가 특정 맥락에 어울리는지 논리적으로 판단할 수 있습니다.
글자에도 '골격'이 있습니다 — 서체 해부학(Type Anatomy)
모든 알파벳 글자는 공통된 구조적 요소를 가지고 있습니다. 이 요소들의 비율과 형태가 서체의 성격을 결정합니다.
x-height(소문자 높이)가 큰 서체일수록 본문 가독성이 높다
- 서체 해부학: baseline, x-height, ascender, descender, counter
- x-height가 클수록 소문자 가독성 향상 → 화면용 서체의 핵심
- Serif: 권위·전통 (인쇄물, 법률, 고급 브랜드)
- Sans-serif: 현대적·깔끔 (웹/앱 UI 대부분)
- Monospace: 정밀·정렬 (코드, 데이터 테이블)
- 페어링 원칙: 대비(Serif+Sans), 2~3개 이내, x-height 맞추기
모듈러 스케일
모듈러 스케일은 하나의 비율(ratio)로 모든 글자 크기를 생성하는 시스템입니다. 음악의 화음처럼, 수학적 비율이 시각적 조화를 만듭니다.
글자 크기에도 '화음'이 있습니다 — 모듈러 스케일(Modular Scale)
모듈러 스케일은 기본 크기(base)에 일정한 비율(ratio)을 반복 곱하여 크기 체계를 만드는 방법입니다. 음악에서 옥타브가 주파수의 2배 관계인 것처럼, 타이포그래피에서도 비율이 시각적 조화를 만듭니다.
base × ratio^n = 각 단계의 크기 (n = 0, 1, 2, 3, ...)
- 모듈러 스케일: base × ratio^n 으로 크기 체계 생성
- Major Third(1.25): 가장 범용적인 웹 비율
- 비율이 클수록 극적 위계, 작을수록 섬세한 위계
- 타입 위계: Display → H1~H4 → Body → Caption
- 장점: 일관성, 확장성, 협업 용이, 시각적 조화
수직 리듬과 행간·행폭
서체 선택이 '무엇'이라면, 행간·행폭·자간은 '어떻게' 배치하느냐의 문제입니다. 이 세 가지가 읽기 경험(readability)을 결정합니다.
행간은 '글자 크기'만큼 중요한 타이포 설정입니다
행간(line-height)은 텍스트 줄 사이의 수직 간격입니다. 행간이 너무 좁으면 글자가 겹쳐 보이고, 너무 넓으면 줄 간의 연결이 끊어져 읽기 흐름이 방해됩니다.
핵심 원칙: 글자가 클수록 행간 비율을 줄이고, 글자가 작을수록 행간 비율을 늘린다
- 행간(line-height): 본문 1.4~1.6, 제목 1.1~1.3
- 핵심 원칙: 글자가 클수록 행간 비율↓, 작을수록 행간 비율↑
- 행폭(measure): 45~75자 최적, 65ch가 가장 보편적
- 자간(letter-spacing): 큰 글자 → 좁히고, 작은 글자 → 넓히기
- 수직 리듬: 모든 줄 높이를 8px 배수로 맞추면 정돈된 리듬 완성
핵심 용어 모음
Baseline
모든 글자가 앉는 수평 기준선. 텍스트 정렬의 출발점
x-height
소문자 'x'의 높이. 본문 가독성의 핵심 지표
Ascender
x-height 위로 올라가는 부분 (b, d, h, l의 윗부분)
Descender
baseline 아래로 내려가는 부분 (g, p, q, y의 아랫부분)
Counter
글자 안의 닫힌/열린 공간 (o, e, a 내부의 빈 공간)
Serif
글자 획 끝의 작은 장식 돌기. 있으면 Serif체, 없으면 Sans-serif
1.125 (Major Second)
16 → 18 → 20 → 23 → 25 — 변화가 미세, 정보 밀집 UI
1.250 (Major Third)
16 → 20 → 25 → 31 → 39 — 가장 범용적, 웹 표준
1.333 (Perfect Fourth)
16 → 21 → 28 → 38 → 50 — 명확한 위계, 블로그·매거진
1.500 (Perfect Fifth)
16 → 24 → 36 → 54 → 81 — 극적 대비, 랜딩페이지
1.618 (Golden Ratio)
16 → 26 → 42 → 67 → 109 — 황금비, 장식적 디자인
본문 (Body)
1.4 ~ 1.6 — 장문 읽기에 최적. 1.5가 가장 범용적
비교 정리
| 항목 | 적절한 선택 | 부적절한 선택 |
|---|---|---|
| 법률 사무소 | Serif (Playfair) → 권위·신뢰감 전달 | Rounded Sans → 장난스럽고 가벼운 인상 |
| 테크 스타트업 | Sans-serif (Inter) → 현대적·혁신적 이미지 | Old Style Serif → 구식·보수적 느낌 |
| 코드 에디터 | Monospace (Fira Code) → 정렬·리거처 지원 | Proportional Sans → 들여쓰기 깨짐 |
| 아동 교육 앱 | Rounded Sans (Nunito) → 친근하고 부드러움 | Condensed Serif → 딱딱하고 접근하기 어려움 |
| 항목 | 모듈러 스케일 | 임의 크기 지정 |
|---|---|---|
| 일관성 | 모든 크기가 하나의 비율로 연결 → 체계적 | 디자이너마다 다른 크기 → 비일관적 |
| 확장성 | 비율만 바꾸면 전체 스케일 자동 조정 | 크기 하나 바꾸면 나머지도 수동 조정 필요 |
| 협업 | 규칙이 명확해서 팀원 누구나 동일하게 적용 | 개인 감각 의존 → 사람마다 다른 결과 |
| 시각적 조화 | 수학적 비례 → 무의식적으로 '편안함' 인식 | 비례 관계 없음 → '어딘가 어색함' 발생 |
| 항목 | 최적 설정 | 비최적 설정 |
|---|---|---|
| 본문 행간 | 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% → 글자가 흩어져 힘없는 느낌 |
퀴즈와 인터랙션으로 더 깊이 학습하세요
play_circle인터랙티브 코스 시작하기