글자 크기에도 질서가 필요하다

KRDS DS-036 — 정보 전달과 체계적인 글자 사용을 위해 계층에 맞는 글자 크기를 정의하고 있다.

0. 들어가며 — 크기에 ’체계’를

지난 편들에서 본문 크기(16·17px)와 단위(rem)를 봤습니다. 이번엔 그 크기들을 체계적으로 정리하는 이야기입니다.

화면에는 여러 종류의 텍스트가 있습니다 — 큰 제목, 중간 제목, 본문, 보조 설명, 캡션. 이들의 크기가 제각각 이면 화면이 산만하고, 어느 게 더 중요한지 알기 어렵습니다. 반대로 크기가 계층(hierarchy) 으로 정리되면, 사용자는 크기만 보고도 ’이건 큰 제목, 이건 본문’을 직관적으로 압니다. 크기가 정보의 위계를 전달하는 것이죠.

DS-036은 이 계층에 맞는 글자 크기를 정의하라고 규정합니다. 크기를 그때그때 감각으로 정하지 말고, 미리 계층별로 정해 두라는 것이죠. 이번 편은 타이포그래피 계층이 왜 필요한지, 그 체계가 어떻게 정보 전달을 돕는지를 풀어냅니다. 이후 편들(037·039)에서 다룰 구체적 계층 설계의 출발점입니다.

1. 규칙 원문 — 두 개의 목적

DS-036 (디자인 스타일 > 타이포그래피) “① 정보 전달과 체계적인 글자 사용을 위해 ② 계층에 맞는 글자 크기를 정의하고 있다.”

① “정보 전달과 체계적인 글자 사용을 위해”

이 규칙의 목적입니다. 글자 크기를 체계화하는 이유가 ‘정보를 잘 전달하고, 글자를 체계적으로 쓰기 위해서’ 라는 것이죠.

② “계층에 맞는 글자 크기를 정의”

핵심 요구입니다. 텍스트의 계층(제목·본문 등)에 따라 크기를 정의해 두라는 뜻입니다. 큰 제목은 이 크기, 본문은 저 크기처럼, 계층별 크기를 체계로 정해 두는 것이죠.

정리: 텍스트 계층(제목·본문·보조 등)에 맞춰 글자 크기를 체계적으로 정의하라. 이게 DS-036입니다.

2. 왜 계층이 필요한가 — 크기는 위계를 전달한다

글자 크기는 단순히 ’크고 작음’이 아니라 위계의 신호입니다.

사용자가 화면을 볼 때, 큰 글자에 먼저 눈이 가고 그게 ‘제목·중요한 것’이라고 인식합니다. 작은 글자는 ’본문·보조’로 받아들이죠. 이 크기의 차이가 정보의 우선순위를 전달합니다. 신문을 떠올려 보세요 — 큰 헤드라인, 중간 부제, 작은 본문. 크기만 봐도 무엇이 핵심인지 알 수 있습니다. 크기는 ’읽기 전에 구조를 파악하게’ 해주는 시각적 지도입니다.

만약 모든 텍스트가 같은 크기면 어떻게 될까요? 제목과 본문이 구분 안 되고, 화면이 평평한 글자 덩어리가 됩니다. 사용자는 무엇이 제목이고 무엇이 본문인지 일일이 읽어봐야 알 수 있죠. 크기의 계층이 없으면 정보의 구조가 사라집니다. 그래서 계층에 맞는 크기 정의는 ’정보를 구조적으로 전달’하기 위한 기본입니다(규칙의 목적과 정확히 일치하죠).

이는 색의 역할 구분(7편)과 같은 발상입니다. 색에 역할(Primary·Secondary)을 부여했듯, 글자 크기에도 계층 (제목·본문)을 부여하는 것입니다. 둘 다 ’요소에 질서를 부여해 정보를 구조화한다’는 같은 원리입니다.

3. ’체계로 정의’한다는 것 — 감각이 아니라 규칙

DS-036의 핵심은 크기를 ‘체계로 정의’ 한다는 데 있습니다. 이게 ’감각으로 그때그때 정하기’와 어떻게 다를까요?

체계 없이 크기를 정하면, 디자이너가 화면마다 “이 제목은 28px쯤?”, “저 제목은 26px?” 하고 감각으로 정합니다. 그러면 같은 위계의 제목인데 페이지마다 크기가 미묘하게 다르고(28px vs 26px), 위계 구분도 들쭉날쭉해집니다. 일관성이 깨지는 것이죠.

반면 계층을 체계로 정의하면 — 예를 들어 ‘제목1=32px, 제목2=24px, 본문=17px, 보조=14px’처럼 — 모든 화면이 이 정해진 크기를 씁니다. 같은 위계는 항상 같은 크기, 위계 간 차이도 일관됩니다. 디자이너는 크기를 발명하지 않고 ’정의된 계층에서 고르기만’ 하면 되죠. 이는 색을 팔레트 단계에서 고르는 것(DS-004), 글자 굵기를 둘로 제한하는 것(DS-030)과 같은 ’체계화’의 원리입니다.

이 체계를 보통 타이포그래피 스케일(type scale) 이라 부릅니다. 글자 크기들이 일정한 규칙(비율 등)으로 정리된 눈금이죠. 다음 편(DS-037)에서 이 스케일의 구체적 비율(heading과 body의 1.25~1.5배 차이)을 다룹니다. DS-036은 그 스케일을 ’정의하라’는 큰 원칙이고, 037 이후가 구체적 수치입니다.

4. 계층의 큰 그림 — display, heading, body

타이포그래피 계층은 크게 세 층으로 나뉩니다(자세한 건 DS-037).

Display(디스플레이) — 가장 큰 텍스트. 메인 배너의 큰 헤드라인 등, ’읽기’보다 ’보기’에 가까운 강조 영역.

Heading(헤딩/제목) — 제목·소제목. 콘텐츠의 구조를 나누는 텍스트(h1~h5).

Body(본문) — 읽는 본문. 실제 정보가 담긴 텍스트.

이 세 층 각각에 맞는 크기를 정의하는 것이 DS-036의 실천입니다. Display는 크게, Heading은 중간, Body는 읽기 좋은 크기로요. 그리고 각 층 안에서도 세부 단계(Heading의 h1~h5 등)를 둘 수 있습니다.

이 계층이 정의돼 있으면, 콘텐츠를 만들 때 ’이 텍스트는 어느 계층인가’만 정하면 크기가 자동으로 따라옵니다. 제목이면 Heading 크기, 본문이면 Body 크기. 크기를 매번 고민할 필요가 없고, 모든 화면이 일관된 계층을 갖습니다. 정보의 구조가 크기로 명확히 드러나죠.

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

흔한 위반 패턴

함정 ① 계층 없음. 모든 텍스트가 비슷한 크기 → 제목·본문 구분 안 됨, 구조 불명확. → 계층별 크기 정의. 함정 ② 감각적 크기. 화면마다 제목 크기가 제각각 → 일관성 붕괴. → 체계(스케일)로 통일. 함정 ③ 과도한 단계. 크기 단계가 너무 많아 위계 모호 → 핵심 계층으로 정리. 함정 ④ 역전. 본문이 제목보다 크거나 위계가 뒤섞임 → 크기 위계 정렬.

무엇을 점검하나

계층 정의 — display·heading·body 등 계층별 크기가 정의됐는가.

일관성 — 같은 계층이 화면 전체에서 같은 크기인가.

위계 명확성 — 크기로 정보 위계가 구분되는가.

체계성 — 크기가 감각이 아니라 정의된 스케일을 따르는가.

Before / After

/* ❌ Before: 계층 없이 감각적 크기 */ .title-a { font-size: 27px; } .title-b { font-size: 25px; } /* 같은 위계인데 다름 */ /* ✅ After: 계층 스케일 정의 */ :root { --font-display: 2.5rem; /* 40px */ --font-h1: 2rem; /* 32px */ --font-h2: 1.5rem; /* 24px */ --font-body: 1.0625rem; /* 17px */ --font-caption: 0.875rem; /* 14px */ } h1 { font-size: var(--font-h1); } body { font-size: var(--font-body); }

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

역할	책임
디자인 시스템 담당 / 디자이너	타이포그래피 계층(스케일) 정의 — 주관
퍼블리셔/개발	계층 크기를 토큰으로 구현

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

여러 종류의 텍스트가 있는 모든 사이트 = 해당. KRDS 타이포그래피 토큰을 채택하면 계층이 이미 정의돼 있습니다.

7. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 제목·본문·보조의 크기 계층이 정의돼 있나요?

□ 같은 위계 제목이 화면마다 같은 크기인가요?

□ 크기만 보고 무엇이 제목·본문인지 알 수 있나요?

□ 크기를 감각이 아니라 정의된 스케일로 정하나요?

□ 본문이 제목보다 크지 않나요(위계 역전 없음)?

❓ FAQ

Q1. 계층을 몇 단계로 나누나요? 크게 display·heading·body 세 층이고, heading은 h1~h5로 세분합니다(DS-037·039). 너무 많으면 위계가 모호 하니, 필요한 만큼만 정의합니다. KRDS 토큰을 쓰면 검증된 계층을 그대로 쓸 수 있습니다.

Q2. 크기를 어떤 비율로 정하나요? heading과 body 간 1.25~1.5배 차이가 권장됩니다(DS-037). 일정한 비율로 스케일을 만들면 위계가 자연스럽고 조화롭습니다. 구체적 비율은 다음 편에서 다룹니다.

Q3. CSS 변수(토큰)로 꼭 만들어야 하나요? 권장됩니다. 토큰으로 정의하면 일관성이 보장되고, 나중에 크기를 조정할 때 한 곳만 바꾸면 됩니다. 화면마다 크기를 하드코딩하면 일관성이 깨집니다.

Q4. 반응형에서 계층이 달라지나요? 화면 크기에 따라 계층 크기를 조정할 수 있지만, 위계 관계(제목>본문)는 유지해야 합니다. 모바일에서 제목을 약간 줄이더라도 본문보다는 커야 합니다.

Q5. KRDS를 채택하면 자동인가요? KRDS는 display·heading·body 계층과 각 크기를 토큰으로 정의해 제공합니다. 채택하면 계층이 이미 갖춰져 있어 그대로 쓰면 됩니다.

8. 마무리 — 크기에 질서를 부여하다

DS-036의 메시지는 체계의 가치를 담습니다.

글자 크기는 위계의 신호다 — 계층으로 정의하면 정보가 구조적으로 전달된다.

크기를 감각으로 정하면 화면이 산만하고 일관성이 깨지지만, 계층으로 정의하면 크기만 보고도 정보의 구조가 읽힙니다. 큰 것은 제목, 작은 것은 본문 — 사용자는 읽기 전에 구조를 파악합니다. 이는 색에 역할을 부여한 것(7편)과 같은, ’요소에 질서를 부여해 정보를 구조화한다’는 디자인 시스템의 일관된 원리입니다.

다음 편은 이 계층의 구체적 설계를 다룹니다. DS-037 — “타이포그래피 계층을 display, heading, body로 구성하고, heading과 body 간의 글자 크기 차이를 1.25~1.5배로 설정한다.” 계층의 정확한 구조와 비율을 살펴봅니다.

다음 편 예고 ▶ 「037. 타이포그래피 계층을 display, heading, body로 구성하고, heading과 body 간의 글자 크기 차이를 1.25~1.5배로 설정하고 있다.」

우리 사이트의 글자 크기 계층이 체계적인지 확인하려면? ViewCheck는 글자 크기가 계층(display·heading·body)으로 정의됐는지, 같은 위계가 일관된 크기인지, 위계 역전은 없는지를 진단합니다.

📚 참고 출처

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

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

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