제목과 본문의 거리, 1.25~1.5배

KRDS DS-037 — 타이포그래피 계층을 display, heading, body로 구성하고, heading과 body 간의 글자 크기 차이를 1.25~1.5배로 설정하고 있다.

0. 들어가며 — 계층에 ’수치’를 부여하다

지난 36편에서 “글자 크기를 계층으로 정의하라”는 원칙을 봤습니다. 이번 37편은 그 계층의 구체적 구조와 비율을 못 박습니다.

DS-037은 두 가지를 규정합니다. 첫째, 계층을 display, heading, body 세 층으로 구성하라. 둘째, heading과 body의 크기 차이를 1.25~1.5배로 설정하라. 36편이 “계층을 정의하라”는 큰 원칙이었다면, 37편은 “그 계층을 이렇게 구성하고, 이 비율로 차이를 두라”는 구체적 설계도입니다.

핵심은 ‘1.25~1.5배’ 라는 비율입니다. 제목(heading)이 본문(body)보다 얼마나 커야 하는가 — 너무 비슷하면 위계가 안 보이고, 너무 차이 나면 부담스럽습니다. 그 사이의 적정선이 1.25~1.5배입니다. 이번 편은 이 세 계층과 비율이 왜 그렇게 정해졌는지를 풀어냅니다.

1. 규칙 원문 — 구조와 비율

DS-037 (디자인 스타일 > 타이포그래피) “타이포그래피 계층을 ① display, heading, body로 구성하고, ② heading과 body 간의 글자 크기 차이를 1.25~1.5배로 설정하고 있다.”

① “display, heading, body로 구성”

계층을 세 층으로 나눕니다. - Display 가장 큰 강조 텍스트(배너 헤드라인 등). - Heading 제목·소제목(h1~h5). - Body 읽는 본문.

② “heading과 body 차이를 1.25~1.5배”

제목(heading)이 본문(body)보다 1.25배에서 1.5배 사이로 커야 한다는 뜻입니다. 본문이 16px이면 heading은 20~24px 범위인 것이죠.

정리: 계층을 display·heading·body 셋으로 구성하고, 제목은 본문의 1.25~1.5배로 설정하라. 이게 DS-037입니다.

2. 세 계층 — display, heading, body

세 계층을 자세히 봅시다. 각자 역할이 다릅니다.

Body(본문) — 기준점

가장 기본이 되는 층입니다. 읽는 본문 텍스트로, 16~17px(33·34편)이 기준입니다. 다른 모든 계층은 이 body를 기준으로 상대적으로 정해집니다. body는 ’읽기 좋음’이 최우선이라 너무 크지도 작지도 않은 적정 크기입니다.

Heading(제목) — 구조의 표지판

콘텐츠의 구조를 나누는 제목·소제목입니다. body보다 크고 보통 Bold(30편)로, 사용자가 글의 구조를 파악하게 돕습니다. h1(가장 큰 제목)부터 h5까지 세부 단계가 있죠(DS-039). heading은 ’읽기’와 ’구조 표시’를 겸하므로, 충분히 크되 과하지 않은 1.25~1.5배 범위에 둡니다.

Display(디스플레이) — 시각적 임팩트

가장 큰 텍스트로, 메인 배너의 큰 헤드라인 등 ’읽기’보다 ’보기’에 가까운 강조 영역입니다. 시각적 임팩트가 목적이라 heading보다도 큽니다. 다만 display는 너무 커지면 안 된다는 별도 규칙(DS-038)이 있습니다 — 임팩트도 절제가 필요하니까요.

이 세 층이 명확히 구분되면, 화면의 모든 텍스트가 ’나는 어느 층인가’로 정리됩니다. 배너 헤드라인은 display, 섹션 제목은 heading, 설명은 body. 각 층의 크기가 정해져 있으니 일관되고, 층 간 크기 차이가 위계를 전달 합니다.

3. 왜 1.25~1.5배인가 — 위계의 황금 비율

이 규칙의 핵심은 ‘1.25~1.5배’ 라는 비율입니다. 왜 이 범위일까요?

너무 작으면 위계가 안 보인다

제목과 본문의 크기 차이가 너무 작으면(예: 1.1배), 둘이 거의 같아 보여 위계가 인지되지 않습니다. 제목인지 본문인지 구분이 안 되죠. 위계가 작동하려면 눈에 띄는 차이가 필요합니다.

너무 크면 부담스럽고 공간을 낭비한다

반대로 차이가 너무 크면(예: 3배) 제목이 지나치게 커서 부담스럽고, 화면 공간을 많이 차지해 정보 밀도가 떨어집니다. 또 제목과 본문의 시각적 거리가 너무 멀어 글이 따로 노는 느낌을 줍니다.

1.25~1.5배 — 명확하되 조화로운

1.25~1.5배는 이 둘 사이의 적정선입니다. 제목이 본문보다 분명히 크되(위계 명확), 과하지 않아(조화로움) 화면이 정돈됩니다. 본문 16px 기준으로 제목 20~24px 정도죠. 이 범위에서 위계는 또렷하면서도 전체가 자연 스럽게 어우러집니다.

이 비율은 디자인의 ‘타입 스케일(type scale)’ 이론과도 맞닿아 있습니다. 좋은 타이포그래피는 크기들이 일정한 비율로 이어질 때 조화롭습니다. 1.25(Major Third), 1.5(Perfect Fifth) 같은 비율은 음악의 화음처럼 시각적 조화를 만드는 것으로 알려져 있죠. KRDS가 1.25~1.5배를 권하는 것은 이런 검증된 조화 비율을 채택한 것입니다.

4. 계층은 크기만이 아니다 — 두께·색과의 조합

37편을 제대로 적용하려면, 계층이 크기만으로 표현되는 게 아니라는 점을 기억해야 합니다.

heading과 body의 1.25~1.5배 크기 차이에 더해, 두께(30편)와 색(다음 편 DS-041) 도 계층을 보강합니다. 제목은 ’크고(1.25~1.5배) + Bold(700)’로, 본문은 ’보통 크기 + Regular(400)’로. 크기와 두께가 함께 작동하면 위계가 더 명확해집니다. 만약 크기만으로 위계를 표현하려 하면 더 큰 차이가 필요하지만, 두께를 함께 쓰면 1.25~1.5배의 절제된 크기 차이로도 충분한 위계가 나옵니다.

이는 8편(강조)·30편(두께)에서 본 “여러 도구를 조합하라”는 원리의 연장입니다. 크기 하나에 위계를 다 싣지 않고, 크기·두께·색을 함께 쓰면 각 도구를 절제하면서도 명확한 위계를 만들 수 있습니다. 1.25~1.5배라는 ’절제된 크기 차이’가 가능한 것도, 두께·색이 위계를 함께 떠받치기 때문입니다.

5. 흔한 위반 패턴 / 점검 / 개선

흔한 위반 패턴

함정 ① 위계 차이 부족. 제목과 본문 크기가 1.25배 미만 → 위계 안 보임. → 1.25배 이상. 함정 ② 과도한 차이. 제목이 본문의 2~3배 → 부담, 공간 낭비. → 1.5배 이하로. 함정 ③ 계층 미구성. display·heading·body 구분 없음 → 구조 불명확. → 세 층 구성. 함정 ④ 비율 불규칙. 계층 간 크기가 제각각 비율 → 부조화. → 일정 비율의 스케일.

무엇을 점검하나

세 계층 — display·heading·body로 구성됐는가.

비율 — heading이 body의 1.25~1.5배인가.

위계 명확성 — 계층 간 크기 차이로 위계가 구분되는가.

조합 — 크기에 두께·색이 함께 위계를 보강하는가.

Before / After

/* ❌ Before: 위계 차이 부족 또는 과도 */ body { font-size: 1rem; } /* 16px */ h2 { font-size: 1.1rem; } /* 17.6px — 차이 부족(1.1배) */ /* ✅ After: 1.25~1.5배 */ body { font-size: 1rem; } /* 16px (body) */ h2 { font-size: 1.5rem; } /* 24px = 1.5배 (heading) */ .display { font-size: 2.5rem; }/* 40px (display) */ h2 { font-weight: 700; } /* 두께로 위계 보강 */

6. 누가 담당하나 / 우리 사이트에 해당될까?

역할	책임
디자인 시스템 담당 / 디자이너	display·heading·body 계층과 1.25~1.5배 비율 설계
퍼블리셔/개발	계층 크기를 토큰으로 구현

기관 유형	DS-037 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 필수

제목·본문이 있는 모든 사이트 = 해당. KRDS 타이포 토큰을 채택하면 계층·비율이 이미 설계돼 있습니다.

7. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 계층이 display·heading·body 셋으로 구성됐나요?

□ 제목(heading)이 본문(body)의 1.25~1.5배인가요?

□ 제목과 본문이 크기로 명확히 구분되나요?

□ 제목이 지나치게 크지 않나요(1.5배 이하)?

□ 크기에 두께(Bold)가 함께 위계를 보강하나요?

❓ FAQ

Q1. 왜 하필 1.25~1.5배인가요? 너무 작으면(1.1배) 위계가 안 보이고, 너무 크면(2~3배) 부담스럽고 공간을 낭비합니다. 1.25~1.5배는 위계가 또렷하면서도 조화로운 적정선이며, 디자인의 타입 스케일 이론(Major Third·Perfect Fifth)과도 맞닿아 있습니다.

Q2. heading 안의 h1~h5도 1.25~1.5배인가요? DS-037은 heading과 body의 차이를 규정합니다. heading 내부의 h1~h5 단계는 다음 편(DS-039)에서 다룹니다. 전체적으로 일정한 비율의 스케일을 유지하는 것이 좋습니다.

Q3. display는 얼마나 커야 하나요? display는 heading보다 크되, 과도하게 크면 안 됩니다(DS-038). 시각 임팩트를 주되 절제가 필요합니다. 구체적 상한은 다음 편들에서 다룹니다.

Q4. 모바일에서도 1.25~1.5배인가요? 화면 크기에 따라 절대 크기는 조정될 수 있지만, heading과 body의 비율 관계(1.25~1.5배)는 유지하는 것이 위계 일관성에 좋습니다.

Q5. KRDS를 채택하면 자동인가요? KRDS는 display·heading·body 계층과 각 크기를 토큰으로 정의해, 비율도 적정 범위로 설계돼 있습니다. 채택하면 DS-036·037이 충족됩니다.

8. 마무리 — 거리가 위계를 만든다

DS-037의 메시지는 비율의 지혜를 담습니다.

제목과 본문 사이의 ‘적정한 거리’(1.25~1.5배)가 명확하면서도 조화로운 위계를 만든다.

위계는 차이에서 나오지만, 그 차이가 너무 작으면 안 보이고 너무 크면 부담스럽습니다. 1.25~1.5배라는 적정 비율은 제목이 본문과 분명히 구분되면서도 전체가 자연스럽게 어우러지는 황금선입니다. 그리고 이 절제된 크기 차이가 가능한 것은 두께·색이 위계를 함께 떠받치기 때문이죠. 적정한 거리와 도구의 조합 — 이것이 체계적인 타이포그래피의 핵심입니다.

다음 편은 가장 큰 계층, display의 절제를 다룹니다. DS-038 — “디스플레이(Display)의 글자 크기를 과도한 크기로 적용하지 않는다.” 강조도 지나치면 안 되는 이유를 살펴봅니다.

다음 편 예고 ▶ 「038. 디스플레이(Display)의 글자 크기를 과도한 크기로 적용하지 않고 있다.」

우리 사이트의 타이포 계층 비율이 적절한지 확인하려면? ViewCheck는 계층이 display·heading·body로 구성됐는지, heading과 body의 비율이 1.25~1.5배인지, 위계가 크기·두께로 명확히 구분되는지를 진단합니다.

📚 참고 출처

KRDS 서체(Typography) 스타일 가이드 — https://www.krds.go.kr/html/site/style/style_03.html

KRDS #ViewCheck #공공웹사이트 #전자정부 #디지털정부 #웹접근성 #디자인시스템 #UIUX #UI컴포넌트 #웹표준

KRDS,ViewCheck,공공웹사이트,전자정부,디지털정부,웹접근성,디자인시스템,UIUX,UI컴포넌트,웹표준