타이포그래피는 '보이지 않는 디자인'입니다. 페이지를 처음부터 끝까지 자연스럽게 읽을 수 있을 때, 타이포그래피의 존재를 의식하는 경우는 거의 없습니다. 반면 글씨가 너무 작거나, 줄간격이 너무 좁거나, 폰트가 너무 많으면 불편함을 느끼면서도 원인을 말하기 어렵습니다. 기본적인 타이포그래피 원칙을 이해하는 것이 콘텐츠를 더 읽기 쉽고 신뢰받게 만드는 첫걸음입니다.
1. 폰트 분류：알아야 할 다섯 가지 유형
| 유형 | 특징 | 대표 폰트 | 적합한 용도 |
|---|---|---|---|
| 세리프체（Serif） | 획 끝에 장식적인 돌기가 있음 | Times New Roman, Georgia | 장문 기사, 학술 문서, 인쇄물 |
| 산세리프체（Sans-serif） | 장식 없이 깔끔한 획 | Arial, Helvetica, Noto Sans | 웹 본문, UI 인터페이스, 모바일 |
| 등폭 폰트（Monospace） | 모든 문자의 너비가 동일 | Courier, Fira Code | 소스코드, 터미널 출력, 데이터 정렬 |
| 스크립트체（Script） | 손글씨 스타일 | Brush Script, Pacifico | 제목, 장식, 브랜드 로고 |
| 디스플레이체（Display） | 개성이 강하고 장문에 부적합 | Impact, Bebas Neue | 대형 제목, 포스터, 광고 |
웹 본문에 가장 많이 사용되는 것은 산세리프체입니다. 화면 해상도에서는 세리프의 세부 디테일이 인쇄만큼 선명하지 않기 때문에, 산세리프체가 다양한 크기에서 더 나은 가독성을 제공합니다.
2. 줄간격：가독성에 가장 큰 영향을 미치는 매개변수
- 본문 권장값：1.5–1.8배（폰트 크기 대비 배율）. 한국어·중국어·일본어는 문자 밀도가 높아 영문보다 큰 줄간격（1.7–1.8）이 필요합니다
- 제목 권장값：1.1–1.3배. 제목은 글자가 크고 시각적 무게감이 있어 줄간격이 너무 크면 일체감이 사라집니다
- 코드 블록：1.5 전후
CSS에서는 단위 없는 배수（예: line-height: 1.7）를 사용하세요. 폰트 크기가 변경될 때 비례적으로 스케일됩니다.
3. 폰트 크기와 자간
웹 본문의 최소 가독 폰트 크기는 16px（브라우저 기본값）입니다. 14px 미만은 피하세요. 한국어 본문에는 자간（letter-spacing）을 별도로 조정할 필요가 없습니다. 영문 대문자 제목에는 +0.05em~+0.1em의 약간의 양의 자간이 효과적입니다.
4. 한영 혼용 규칙
- 한국어와 영문 사이에 공백 추가：예: "CSS를 사용하여 스타일을 설정"
- 숫자와 단위 사이에 공백："1.7배 줄간격"
- 한국어와 영문 구두점 혼용 금지：한국어 문장에는 한국어 구두점 사용
- font-family 선언 순서：한국어 폰트를 먼저, 영문 폰트를 나중에 선언
Markdown 미리보기：Markdown 에디터에서 제목 계층, 단락 간격, 코드 블록 렌더링을 실시간으로 확인하세요.
5. 텍스트 명암비：접근성의 기준선
WCAG가 정한 명암비 기준：
- AA 레벨：본문 텍스트 4.5:1 이상, 큰 텍스트（18px 이상）3:1 이상
- AAA 레벨：본문 텍스트 7:1 이상, 큰 텍스트 4.5:1 이상
자주 발생하는 문제：흰색 배경 위에 #999 회색 텍스트는 명암비가 약 2.85:1로 AA 기준에 훨씬 미치지 못합니다.
명암비 즉시 확인：명암비 검사기에서 전경색과 배경색을 입력하면 WCAG AA/AAA 통과 여부를 바로 확인할 수 있습니다.
6. 폰트 페어링 전략
- 세리프 제목 + 산세리프 본문：전통적인 출판 스타일, 블로그·뉴스 사이트에 적합
- 디스플레이 제목 + 산세리프 본문：강한 개성, 브랜드 사이트·이벤트 페이지에 적합
- 같은 패밀리의 다른 굵기：가장 안전한 선택, 스타일이 통일되어 실수가 적음
한 페이지에 3종류 이상의 폰트를 사용하지 마세요. 폰트가 늘어날수록 로딩 시간이 증가하고 화면이 복잡해집니다.
7. 웹 폰트 로딩 성능
- 서브셋화（Google Fonts）：페이지에서 실제로 사용하는 문자만 로드
- font-display: swap：폰트 로딩 중에는 시스템 폰트를 표시하여 FOIT를 방지
- 시스템 폰트 우선 사용：브랜드 전용 폰트가 필요 없는 경우 시스템 폰트를 사용하면 폰트 로딩 지연을 완전히 없앨 수 있음
글자수·단어수 계산：글자수 계산기에서 글자수, 단어수, 읽기 시간을 확인하여 레이아웃 공간을 추정할 수 있습니다.
요약
- 웹 본문에는 산세리프체를 사용하고 한국어·중국어 줄간격은 1.7–1.8배로 설정
- 본문 최소 폰트 크기는 16px
- 한국어와 영문 사이에 공백을 추가하고 한국어 구두점을 사용
- 텍스트 명암비는 WCAG AA（4.5:1）이상 확보
- 한 페이지에 최대 3종류의 폰트를 사용하고 가능하면 시스템 폰트 우선