웹 타이포그래피 실전 가이드: 폰트 선택을 감각에서 규칙으로
폰트를 취향이 아닌 구조·가독성·계층 기준으로 선택하는 웹 타이포그래피 실전 규칙
게시 
By okorion
6 분읽는 시간 
웹 타이포그래피 실전 가이드: 폰트 선택을 감각에서 규칙으로
웹디자인에서 폰트는 취향 문제가 아니다. 구조·가독성·계층의 문제다. 잘 고른 폰트는 디자인을 안정시키고, 잘못 고른 폰트는 아무리 레이아웃이 좋아도 결과물을 싸 보이게 만든다. 아래는 웹 실무 기준으로 타이포그래피를 판단하는 규칙이다.
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만으로 계층 구분이 가능한가?
- 불필요한 폰트 추가 없이 해결되는가?
④ 웹 환경 적합성
- 웹폰트 로딩 성능에 문제 없는가?
- 다양한 해상도에서 안정적인가?
⑤ 유지보수
- 클래스/스타일로 재사용하기 쉬운가?
- 반응형에서도 무너지지 않는가?
정리
좋은 타이포그래피는 튀지 않는다. 하지만 없으면 바로 티가 난다. 폰트 선택은 감각이 아니라 규칙과 제약을 세우는 일이다.
이 기사는 저작권자의 CC BY 4.0 라이센스를 따릅니다.