제목과 본문 크기 비율, 1.25배가 기준인 이유Why 1.25× Is the Standard Heading-to-Body Ratio
타이포그래피 스케일에서 제목과 본문의 크기 비율을 정하는 기준과 모듈러 스케일 활용법을 정리합니다.The logic behind modular type scales and how to choose the right ratio for your content's character.
- 1.25배: 가장 무난한 출발점
- 콘텐츠 성격에 따른 비율 선택
- 크기만으로 위계를 만들지 말 것
- 실무 적용: CSS 변수로 스케일 고정하기
- 한글 타이포그래피에서의 보정
- 1.25×: the most versatile starting point
- Matching ratio to content personality
- Size isn't the only hierarchy tool
제목을 본문보다 '적당히' 크게 만들라는 조언은 모호합니다. 적당히가 얼마인지 숫자로 말할 수 있어야 일관된 시스템이 됩니다. 타이포그래피에서 그 답은 비율, 즉 모듈러 스케일(Modular Scale)입니다.
1.25배: 가장 무난한 출발점
본문 16px에 1.25배를 반복 적용하면 16 → 20 → 25 → 31 → 39px의 단계가 나옵니다. 이 비율(Major Third)은 단계 간 차이가 분명하면서도 과하지 않아, 문서·블로그·관리자 화면처럼 텍스트가 많은 인터페이스에 두루 어울립니다. 제목과 본문의 크기 차이가 1.25~1.5배 범위에 있을 때 위계는 드러나면서 흐름이 끊기지 않는다는 것이 오랜 편집 디자인의 경험칙입니다.
콘텐츠 성격에 따른 비율 선택
비율은 페이지의 목소리 크기입니다. 1.2배(Minor Third)는 차분하고 밀도 높은 느낌이라 대시보드에 적합하고, 1.333배(Perfect Fourth)는 표현력이 좋아 마케팅 페이지에 어울립니다. 1.618배(황금비)는 단계 간 대비가 극적이어서 큰 헤드라인이 주인공인 랜딩 페이지에 효과적입니다. 중요한 것은 하나의 비율을 정했으면 페이지 전체에서 일관되게 쓰는 것입니다. 제목마다 임의의 크기를 부여하는 순간 시스템은 무너집니다.
크기만으로 위계를 만들지 말 것
위계는 크기, 굵기, 색, 여백의 조합으로 만들어집니다. 크기 차이를 줄이고 싶다면 굵기(예: 본문 400, 제목 700)와 위쪽 여백으로 보완할 수 있습니다. 실무에서는 h1~h3까지만 스케일을 쓰고 h4 이하는 본문 크기에 굵기만 달리하는 경우도 많습니다. 또한 제목은 행간을 본문(1.5~1.7)보다 좁은 1.1~1.3으로 잡아야 여러 줄로 꺾였을 때 덩어리감이 유지됩니다.
오늘 만드는 화면의 폰트 크기들을 나열해 보세요. 16, 18, 22, 28처럼 규칙 없이 흩어져 있다면 비율 하나를 정해 다시 정렬하는 것부터가 타이포그래피 시스템의 시작입니다.
실무 적용: CSS 변수로 스케일 고정하기
정한 비율이 작업 중에 흐트러지지 않게 하려면 코드 차원에서 고정하는 것이 좋습니다. CSS 커스텀 프로퍼티로 --text-sm: 13px; --text-base: 16px; --text-lg: 20px; --text-xl: 25px; --text-2xl: 31px처럼 토큰을 정의하고, 컴포넌트에서는 항상 토큰만 참조하게 만드세요. 디자이너가 피그마에서 같은 이름의 텍스트 스타일을 쓰면 디자인과 코드의 스케일이 자동으로 동기화됩니다.
한글 타이포그래피에서의 보정
같은 픽셀 크기라도 한글은 라틴 알파벳보다 글자가 빽빽하고 커 보입니다. 영문 기준으로 만들어진 스케일을 한글 본문에 그대로 쓰면 행간이 부족하게 느껴지는 이유입니다. 한글 본문은 행간을 1.6~1.8로 영문(1.5)보다 넉넉히 잡고, 자간은 -0.01~-0.02em 정도 살짝 좁히면 인상이 단정해집니다. 제목은 크기가 커질수록 자간을 더 좁혀야(-0.02~-0.04em) 글자들이 흩어져 보이지 않습니다. 비율 시스템에 이런 언어별 보정을 더하는 것이 한국어 서비스 타이포그래피의 완성도를 가릅니다.
"Make the heading a bit larger than the body" is vague advice. You need a number — a ratio — to build a consistent type system. That's what modular scale provides.
1.25×: the most versatile starting point
Applying 1.25× (Major Third) repeatedly from 16px gives 16 → 20 → 25 → 31 → 39px. The step differences are clear without being extreme, making this scale ideal for text-heavy interfaces: documents, blogs, admin dashboards. When the size gap between heading and body falls in the 1.25–1.5× range, hierarchy is visible without breaking reading flow — a principle with deep roots in editorial design.
Matching ratio to content personality
The ratio is your page's "volume." 1.2× (Minor Third) reads calm and dense — right for dashboards. 1.333× (Perfect Fourth) is more expressive — suited to marketing pages. 1.618× (golden ratio) is dramatic, ideal for landing pages where a big headline is the hero. Once you pick a ratio, use it consistently across the entire page. Assigning arbitrary sizes to each heading level collapses the system instantly.
Size isn't the only hierarchy tool
Hierarchy is built from size, weight, color, and spacing combined. If you want to reduce size contrast, compensate with weight (e.g., body 400, heading 700) and margin above. In practice many systems apply the scale only to h1–h3, then use the body size with changed weight for h4 and below. Also remember: headings need tighter line-height (1.1–1.3) than body text (1.5–1.7) to preserve the blocky feel when they wrap.
List the font sizes in your current design. If they're scattered — 16, 18, 22, 28 — with no underlying pattern, picking one ratio and realigning them is where a typography system begins.