Ch.6 타이포그래피 시스템
서체 해부학과 선택 기준
같은 문장인데 서체만 바꾸면 왜 분위기가 완전히 달라질까?
법률 사무소 웹사이트에 Comic Sans를 쓴다면? 어린이 앱에 Times New Roman을 쓴다면? 서체는 글자의 '옷'입니다. 어떤 옷을 입히느냐에 따라 메시지의 인상이 결정됩니다.
수천 가지 서체 중 '올바른' 서체를 고르는 기준은 무엇인가?
서체의 해부학적 구조를 이해하면, 왜 특정 서체가 특정 맥락에 어울리는지 논리적으로 판단할 수 있습니다.
핵심 내용
글자에도 '골격'이 있습니다 — 서체 해부학(Type Anatomy)
모든 알파벳 글자는 공통된 구조적 요소를 가지고 있습니다. 이 요소들의 비율과 형태가 서체의 성격을 결정합니다.
x-height(소문자 높이)가 큰 서체일수록 본문 가독성이 높다
Counter(글자 내부 공간)가 넓을수록 작은 크기에서도 글자를 구별하기 쉽습니다. 모바일 화면에서 특히 중요한 요소입니다.
서체는 크게 3가지로 분류됩니다 각각 고유한 '성격'을 가집니다
서체 3대 분류
Serif — 획 끝에 작은 장식(삐침)이 있는 서체입니다. Times New Roman, Georgia, Playfair Display가 대표적입니다. 인쇄물, 법률 문서, 고급 브랜드에서 권위와 전통을 전달할 때 사용합니다.
Sans-serif — 장식이 없는('sans' = 없는) 깔끔한 서체입니다. Inter, Roboto, Pretendard가 대표적입니다. 디지털 화면에서 가독성이 뛰어나 대부분의 웹/앱 UI에 사용됩니다.
Monospace — 모든 글자의 폭이 동일한 서체입니다. Fira Code, JetBrains Mono가 대표적입니다. 코드 에디터, 터미널, 데이터 표 등 정렬이 중요한 곳에 사용됩니다.
서체 페어링의 황금 규칙 1. 대비의 원칙: Serif 제목 + Sans-serif 본문 (또는 그 반대) 2. 같은 분류끼리 섞지 않기: Serif + Serif는 충돌 위험 3. 2~3개 이내: 서체가 많을수록 혼란스러움 4. x-height를 맞추기: 함께 쓸 서체의 소문자 높이가 비슷해야 조화
맥락이 서체를 결정합니다 — 어디에 쓰이는가가 핵심
서체 해부학에서 'x-height'가 의미하는 것은?
서체 페어링 시 Serif + Serif 조합은 대비가 부족해 충돌 위험이 있다
Monospace 서체는 모든 글자의 폭이 다르기 때문에 자연스러운 가독성이 좋다
핵심 용어
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
비교 정리
| 항목 | 적절한 선택 | 부적절한 선택 |
|---|---|---|
| 법률 사무소 | Serif (Playfair) → 권위·신뢰감 전달 | Rounded Sans → 장난스럽고 가벼운 인상 |
| 테크 스타트업 | Sans-serif (Inter) → 현대적·혁신적 이미지 | Old Style Serif → 구식·보수적 느낌 |
| 코드 에디터 | Monospace (Fira Code) → 정렬·리거처 지원 | Proportional Sans → 들여쓰기 깨짐 |
| 아동 교육 앱 | Rounded Sans (Nunito) → 친근하고 부드러움 | Condensed Serif → 딱딱하고 접근하기 어려움 |
서체 선택은 '취향'이 아니라 '맥락'의 문제 — 대상과 목적에 맞는 서체가 올바른 서체다
시각 자료
핵심 정리
- 1서체 해부학: baseline, x-height, ascender, descender, counter
- 2x-height가 클수록 소문자 가독성 향상 → 화면용 서체의 핵심
- 3Serif: 권위·전통 (인쇄물, 법률, 고급 브랜드)
- 4Sans-serif: 현대적·깔끔 (웹/앱 UI 대부분)
- 5Monospace: 정밀·정렬 (코드, 데이터 테이블)
- 6페어링 원칙: 대비(Serif+Sans), 2~3개 이내, x-height 맞추기
퀴즈와 인터랙션으로 더 깊이 학습하세요
play_circle인터랙티브 레슨 시작