폰트는 2가지, 크기는 3가지면 충분하다The Two-Font Rule: Why Fewer Typefaces Mean Better Design
한 화면에서 폰트 패밀리와 크기 가짓수를 제한해야 하는 이유와 예외를 두는 기준을 설명합니다.How limiting yourself to one or two typefaces creates professional-looking UI and builds a coherent typographic voice.
- 가짓수가 늘면 무엇이 무너지는가
- 두 폰트의 역할 분담
- 크기 3가지로 화면 구성하기
- 예외가 허용되는 곳
- 좋은 페어링을 찾는 요령
- 웹 성능까지 생각한 폰트 전략
- One font can be enough
- When you use two fonts
- What unlimited fonts actually cost
좋은 타이포그래피의 비결은 좋은 폰트를 고르는 것보다 폰트의 가짓수를 줄이는 데 있습니다. 한 화면에 폰트 패밀리는 2가지, 크기는 3가지를 넘지 않는 것. 이 오래된 경험칙은 지금도 유효합니다.
가짓수가 늘면 무엇이 무너지는가
폰트가 셋 이상 섞이면 화면의 통일감이 깨지고, 각 폰트가 어떤 역할인지 사용자가 학습할 수 없게 됩니다. 크기도 마찬가지입니다. 14, 15, 16, 18, 21px이 혼재된 화면에서는 크기 차이가 위계가 아니라 잡음으로 읽힙니다. 제한은 미적 취향이 아니라 정보 전달의 효율 문제입니다. 가짓수가 적을수록 각 변화가 의미를 가집니다.
두 폰트의 역할 분담
전형적인 조합은 제목용 폰트와 본문용 폰트의 페어링입니다. 세리프 제목 + 산세리프 본문은 클래식한 신뢰감을, 개성 있는 디스플레이 폰트 + 무난한 산세리프 본문은 브랜드 표현과 가독성의 균형을 만듭니다. 한글 환경이라면 제목과 본문 모두 같은 패밀리를 쓰되 굵기만 달리하는 단일 폰트 전략도 훌륭합니다. Pretendard나 Noto Sans KR처럼 굵기 단계가 풍부한 폰트라면 하나로도 충분한 위계를 만들 수 있습니다.
크기 3가지로 화면 구성하기
기본 구성은 제목(예: 24px), 본문(16px), 캡션(13px)입니다. 여기에 페이지 대표 제목이 필요하면 한 단계(32px)를 추가하는 정도로 충분합니다. 더 세밀한 구분이 필요할 때는 크기 대신 굵기와 색을 조절하세요. 같은 16px이라도 굵기 600의 진한 글씨와 굵기 400의 회색 글씨는 명확히 다른 층위로 읽힙니다.
예외가 허용되는 곳
코드 블록의 모노스페이스 폰트, 인용문의 세리프체처럼 기능적 이유가 있는 폰트는 가짓수 계산에서 너그럽게 봐도 됩니다. 핵심은 '이 폰트가 왜 여기 있는가'에 답할 수 있느냐입니다. 답할 수 없는 폰트와 크기를 지우는 것, 그것이 타이포그래피 정리의 시작이자 끝입니다.
좋은 페어링을 찾는 요령
두 폰트를 조합할 때는 '비슷하면서 다르게'가 원칙입니다. x-높이(소문자 높이)와 글자 폭이 비슷한 폰트끼리는 섞여도 어색하지 않고, 분류(세리프 대 산세리프)가 다르면 역할 구분이 분명해집니다. 같은 디자이너나 같은 패밀리에서 나온 슈퍼패밀리(예: 세리프와 산세리프 버전이 함께 출시된 폰트)는 검증된 안전한 선택입니다. 반대로 개성이 강한 폰트 두 개를 섞는 것은 주연 배우 두 명을 한 장면에 세우는 것과 같아서 거의 항상 충돌합니다.
웹 성능까지 생각한 폰트 전략
폰트 가짓수 제한은 성능 문제이기도 합니다. 한글 웹폰트는 글리프가 많아 굵기 하나에 수백 KB에서 1MB를 넘기도 합니다. 패밀리 2종에 각 3굵기면 최대 6개의 폰트 파일이 로드되는 셈입니다. 쓰는 굵기만 명시적으로 로드하고, 서브셋 폰트(자주 쓰는 글자만 추린 경량판)를 쓰고, font-display: swap으로 로딩 중에도 텍스트가 보이게 하세요. 디자인의 절제가 곧 성능의 절제가 됩니다.
폰트 절제의 효과는 더하는 순간이 아니라 비교하는 순간 드러납니다. 폰트를 정리하기 전후의 화면을 나란히 놓고 보세요. 줄어든 것은 가짓수지만 늘어난 것은 신뢰감이라는 사실을 눈으로 확인하게 될 것입니다.
Mixing fonts is seductive — each new typeface seems to add personality. But every additional typeface also adds visual noise and splits the reader's attention. Professional UI design almost universally follows a simple constraint: use at most two typefaces per project.
One font can be enough
Many of the most polished interfaces use a single typeface family — leveraging weight (400, 600, 700), size, and color to create all the hierarchy they need. A modern variable font can span the entire range from body text to display headline within one file. If a single family covers your needs, adding a second font is complexity without benefit.
When you use two fonts
The classic two-font pairing is a serif for headings and a sans-serif for body — or vice versa. The principle: the two faces should have clear contrast in personality (classic vs. modern, structured vs. humanist) but harmonious proportions. Free starting points: Playfair Display + Source Sans Pro, Merriweather + Inter. Avoid pairing two serifs or two grotesque sans-serifs — the similarity creates tension without contrast.
What unlimited fonts actually cost
Beyond aesthetics, each additional font is an HTTP request, a rendering cost, and a maintenance burden. Three typefaces from three different foundries means three different rhythm systems fighting each other across your screens. The user doesn't notice extra fonts; they notice when the screen feels inconsistent, and the fonts are often why.
The effect of font restraint becomes visible as a contrast — before and after. Reducing from four typefaces to two and placing them side by side reveals that what was lost is count, and what was gained is trust.