웹 타이포그래피 실전 가이드: 폰트 선택을 감각에서 규칙으로
폰트를 취향이 아닌 구조·가독성·계층 기준으로 선택하는 웹 타이포그래피 실전 규칙
Posted 
By okorion
6 min read 
웹 타이포그래피 실전 가이드: 폰트 선택을 감각에서 규칙으로
웹디자인에서 폰트는 취향 문제가 아니다. 구조·가독성·계층의 문제다. 잘 고른 폰트는 디자인을 안정시키고, 잘못 고른 폰트는 아무리 레이아웃이 좋아도 결과물을 싸 보이게 만든다. 아래는 웹 실무 기준으로 타이포그래피를 판단하는 규칙이다.
1) 서체의 성격과 범주를 웹 기준으로 다시 정의하기
웹에서 서체는 “예쁘다/안 예쁘다”가 아니라 어떤 역할을 안정적으로 수행하느냐로 나뉜다.
웹 기준 서체 범주
Sans-serif
- 역할: 본문·UI 텍스트의 기본값
- 이유: 작은 사이즈에서도 획이 깨끗하고 가독성 유지
Serif
- 역할: 브랜드 헤드라인, 에디토리얼 강조
- 이유: 분위기는 강하지만 장문·UI에는 부담
Display / Decorative
- 역할: 히어로 타이틀, 한정적 강조
- 이유: 개성은 강하나 반복 사용 시 피로도 급증
Mono
- 역할: 코드, 수치, 기술적 맥락
- 이유: 정보성은 강하나 일반 텍스트에는 부적합
실무 기준
- 본문용 폰트는 “조용해야” 한다.
- 개성은 제목에서만 사용한다.
2) 웹에서 글꼴은 왜 2개면 충분한가
글꼴을 많이 쓰면 디자인이 풍부해질 것 같지만, 실제로는 의사결정 비용만 증가한다.
2개 원칙의 구조
Font A (기본 본문용)
- 본문, 설명, UI 텍스트의 70~80%
Font B (강조/제목용)
- H1/H2, 브랜드 메시지, 히어로 영역
잘된 예 / 망한 예
- 잘된 예: 같은 폰트 패밀리 안에서 weight/size로 계층 해결
- 망한 예: 제목마다 다른 폰트 → 통일감 붕괴
판단 기준
“이 폰트를 하나 더 쓰지 않으면 해결 안 되는 문제인가?” 대부분의 경우 답은 “아니오”다.
3) 제목 / 본문 / 보조 텍스트 계층 설계 방법
타이포 계층은 정보 우선순위의 시각화다.
기본 3단 계층
제목(Heading)
- 크기: 가장 큼
- 역할: 이 섹션이 ‘무엇인지’ 정의
본문(Body)
- 크기: 읽기 최적화
- 역할: 내용 전달
보조 텍스트(Meta / Caption)
- 크기: 작음
- 역할: 부가 정보, 맥락 설명
실무에서 쓰는 규칙
- 크기 차이만으로 구분하지 말 것 → 굵기(weight) + 행간(line-height) + 색상을 함께 사용
- 계층 간 비율은 대략 1.25~1.4 배수
- 본문 텍스트는 항상 “편안함” 우선 (너무 크지도, 작지도 않게)
체크 포인트
- 제목을 가리고 본문만 봐도 읽기 편한가?
- 본문을 흐리게 해도 제목 구조가 보이는가?
4) 웹 타이포그래피에서 흔히 저지르는 실수
실수 1) 제목을 본문처럼 사용
- 망한 예: 제목이 크기만 조금 큰 본문 느낌
- 결과: 정보 구조가 안 보임
- 해결: 제목은 “문장”이 아니라 “표지”처럼 다뤄야 한다
실수 2) 줄 길이(라인 길이) 무시
- 망한 예: 화면 전체 폭으로 늘어진 본문
- 결과: 가독성 급락
- 기준: 한 줄에 45~75자 내외
실수 3) 행간(line-height)을 감으로 조절
- 망한 예: 글자가 답답하거나 흩어져 보임
기준:
- 본문: font-size의 1.4~1.7배
- 제목: 1.1~1.3배
실수 4) 색 대비 부족
- 망한 예: 회색 텍스트 남발
- 결과: “세련돼 보이려다 읽기 힘든 웹”
- 기준: 본문은 항상 충분한 대비 확보
5) 폰트를 고를 때 쓰는 실전 체크리스트
① 역할 분리
- 본문용 폰트가 있는가?
- 제목용 폰트가 따로 있는가?
② 가독성
- 작은 사이즈에서도 획이 뭉개지지 않는가?
- 장문을 읽어도 피로하지 않은가?
③ 계층 표현
- weight/size만으로 계층 구분이 가능한가?
- 불필요한 폰트 추가 없이 해결되는가?
④ 웹 환경 적합성
- 웹폰트 로딩 성능에 문제 없는가?
- 다양한 해상도에서 안정적인가?
⑤ 유지보수
- 클래스/스타일로 재사용하기 쉬운가?
- 반응형에서도 무너지지 않는가?
정리
좋은 타이포그래피는 튀지 않는다. 하지만 없으면 바로 티가 난다. 폰트 선택은 감각이 아니라 규칙과 제약을 세우는 일이다.
This post is licensed under CC BY 4.0 by the author.