11장 타이포그래피와 글꼴

EDS·MDS·Print DS의 본문 글꼴은 Noto 하나로 통일하고, 브랜드 표기 글꼴은 따로 둡니다. 글자 크기는 다섯 개의 역할로 정하며, 제목의 구조(h1–h6)와 크기를 나눕니다.

왜 필요한가

2026-09-28 KST 이전에는 본문 기본 글꼴이 디자인 시스템(DS)마다 달랐습니다. EDS는 Noto Sans, MDS는 Pretendard를 썼습니다. 앱마다 불러온 글꼴이 달라 같은 문장의 폭과 말줄임 위치가 갈렸습니다. 제품이 해외로 나가면서 일본어와 중국어도 같은 품질로 보여야 했습니다.

크기 이름에도 규칙이 없었습니다. 같은 -md가 역할에 따라 16px, 14px, 30px, 60px을 가리켰습니다. e-title-*를 쓴 499곳 중 214곳(약 43%)은 페이지·구역 제목이 아니라 가격·수치·라벨·버튼 글자 등이었습니다. 이름과 뜻이 어긋나면 사람도 AI 에이전트도 결과를 예측할 수 없습니다.

본문 글꼴은 Noto 하나

글꼴은 역할로 나눕니다. BI(brand identity)는 제품 브랜드, CI(corporate identity)는 회사 브랜드의 표기입니다.

역할	글꼴	쓰는 곳
제품 본문	Noto Sans + 문서 언어의 Noto Sans KR·JP·SC·TC·HK	EDS·MDS·Print DS 본문
BI·CI 표기(bi)	Google Sans Flex	Leyve, LeyVote, Zution, Laiel, Arenity 등
세리프 CI 표기(ci)	Cinzel	Leysys처럼 세리프로 된 CI
화이트 라벨 기본(white-label)	Poppins	고객이 따로 정하지 않은 BI·CI

세 DS는 접두만 다르고(EDS --e-, MDS --m-, Print --print-) 같은 구조의 토큰을 가집니다. 문자권마다 토큰이 하나씩 있고, 합성 스택(font stack)이 이를 정해진 순서로 잇습니다.

--e-font-latin         "Noto Sans"       라틴·그리스·키릴 문자
--e-font-korean        "Noto Sans KR"    한글 (JP·SC·TC·HK도 같은 방식)
--e-font-east-asian    문서 언어의 family가 맨 앞 (기본은 한국어)
--e-font-family        latin → east-asian → 기타 문자 → generic → emoji

한중일이 함께 쓰는 한자는 코드 포인트가 같아도 지역마다 글자 모양이 다릅니다. 그래서 <html lang="ja"> 문서에서는 Noto Sans JP가 한국어 글꼴보다 앞에 옵니다. 일부 요소만 다른 언어(<span lang="ja">)이면 그 요소에서 스택을 다시 계산합니다. 문자권 토큰에는 sans-serif 같은 generic을 넣지 않습니다(명시한 system 프리셋만 예외). generic이 한글을 먼저 채우면 뒤의 Noto가 쓰이지 않을 수 있기 때문입니다.

본문 프리셋은 noto(기본)와 system(운영체제 글꼴) 둘뿐입니다. Pretendard·Inter·IBM Plex·Roboto 등 다른 프리셋은 지웠습니다. 14개 소비처 중 이 프리셋을 쓰는 곳은 없었지만, 목록이 있다는 이유로 여러 앱이 모든 후보 글꼴을 미리 불러오고 있었습니다. 렌더링을 막는 Google Fonts CSS가 158KB(gzip)였고, 실제로 쓰는 세 글꼴만 남기면 25KB였습니다. 다른 글꼴이 필요한 제품은 프리셋을 늘리지 않고 문자권 토큰을 바꿉니다. 운영체제 글꼴만 쓰는 안은 OS마다 글자 폭이 달라 줄바꿈을 예측할 수 없어 기본값으로 채택하지 않았습니다.

브랜드 표기는 Wordmark가 소유

브랜드 이름을 글자로 쓰는 표기(Wordmark)는 본문 글꼴과 독립입니다. EDS EWordmark와 MDS MWordmark가 ci·bi· white-label profile을 제공합니다. profile이 family와 굵기(500)를 함께 고정하므로 본문 프리셋을 바꿔도 브랜드의 외곽은 그대로입니다. Wordmark는 글꼴만 소유하고 크기·색·배치는 제품이 정합니다. 화이트 라벨 기본값을 Poppins로 둔 것은 Leysys의 Google Sans와 비슷하되 구별되게 하기 위해서입니다.

다섯 개의 역할

타이포 역할(typography role)은 display·heading·body·caption·code 다섯 개입니다. 여러 단계가 있는 역할은 크기 이름을 반드시 붙이고(e-body-md), 한 단계뿐인 역할만 이름만 씁니다(e-caption).

역할	클래스	글자/행간(px)	굵기
display	e-display-sm·md·lg	48/56 · 60/68 · 72/80	300
heading	e-heading-2xs ~ e-heading-2xl	14/22 · 16/24 · 18/26 · 20/28 · 24/32 · 30/38 · 36/44	600
body	e-body-sm·md·lg	14/20 · 16/24 · 18/28	상속
caption	e-caption	12/16	상속
code	e-code	코드 글꼴만 바꾸고 크기는 주변을 따름	상속

• 단계 수는 홀수이고 md가 가운데입니다(10장). md는 역할마다 따로 있으며, heading md(20px)가 구역 제목의 대표 크기입니다.
• heading 굵기 600은 카드·시트의 제목과 같습니다. 구역 제목이 그 안의 카드 제목보다 가벼워 보이는 역전을 막습니다.
• title·description은 역할이 아니라 컴포넌트 부품입니다. e-card-title처럼 부품이 크기·굵기를 직접 가지므로 역할 클래스를 겹쳐 붙이지 않습니다.
• 읽는 글자의 기본 최소는 12px(e-caption)입니다. 강제 하한이 아닌 권장이며, 10px·8px은 배지 숫자 같은 비본문 라벨에만 해당 컴포넌트가 씁니다.

제목의 구조와 크기를 나눕니다

h1–h6는 구조, 곧 문서 안의 레벨입니다. e-heading-*는 크기입니다. 레벨은 문서 구조로 고르고 크기를 보고 고르지 않습니다.

<h2 class="e-heading-md">결재 이력</h2>           <!-- 구조는 h2, 크기는 20px -->
<span class="e-body-sm font-medium">홍길동</span>  <!-- 이름은 제목이 아님: 역할 + 굵기 -->

• DS의 base 규칙이 h1–h6에 font-size: inherit; font-weight: inherit을 줍니다. 태그는 크기를 만들지 않습니다.
• e-heading-*는 실제 요소가 h1–h6이거나 role="heading"일 때만 붙입니다. 가격·KPI 같은 큰 숫자는 제목이 아니므로 e-statistic의 값 부품을 씁니다.
• 제목 부품의 기본 요소는 heading이 아닌 div·span 등입니다(모달 제목만 h2). 부품은 자신이 몇 번째 레벨에 놓일지 모르기 때문입니다. 구역 제목인 카드는 사용처가 as="h2"처럼 레벨을 정합니다.

Atlassian과 Primer의 Heading 컴포넌트도 레벨(as)과 크기를 따로 받습니다.

굵기 유틸리티는 역할 클래스 위에서만

페이지에서 Tailwind는 간격과 레이아웃에만 씁니다. 예외는 역할 클래스 위에 굵기 유틸리티(font-*)를 얹는 조합(e-body-sm font-medium) 하나입니다.

이 조합이 동작하는 이유는 cascade 설계에 있습니다. 역할 클래스는 Tailwind와 같은 utilities 레이어에 있고 :where()로 명시도(specificity)를 0으로 둡니다. 그래서 컴포넌트 규칙(표 셀, 필드 라벨)은 이기고, 같은 레이어의 Tailwind 유틸리티에는 집니다. 이전에는 역할 클래스가 Tailwind 굵기를 이겨서 font-bold를 붙여도 적용되지 않았습니다.

md와 base: 의도된 어휘 별칭

Leysys의 크기 어휘는 xs·sm·md·lg·xl이고, Tailwind는 같은 16px 단계를 text-base라고 부릅니다. 나머지 공통 단계는 이름과 값이 모두 같고 이 한 칸만 다릅니다. DS 토큰은 컴포넌트 크기 단계(e-button-md)에 맞춰 md를 씁니다(--e-text-md, --m-text-md). Tailwind의 --text-base는 외부 표준이라 다시 정의하지 않습니다. 둘은 .text-md 유틸리티 하나로 잇습니다.

.text-md {
  font-size: var(--text-base, 1rem);
  line-height: var(--text-base--line-height, calc(1.5 / 1));
}

토큰 원칙은 같은 값을 두 이름으로 정의하지 않습니다(8장). 의도된 어휘 별칭만 예외이며, 나누는 의도가 문서에 있고, 값이 100% 같고, 참조가 한 방향이어야 합니다. md↔base는 이 세 조건을 만족해 영구 유지로 결정했습니다.

소비 앱의 글꼴 로딩 계약

DS 패키지는 본문과 Wordmark 글꼴 파일을 넣지 않습니다. CSS는 family 스택과 프리셋만 제공하고, 프리셋 속성은 네트워크 요청을 만들지 않습니다. 파일은 소비 앱이 불러옵니다.

문서 언어(lang)	불러올 family
ko(기본)	Noto Sans, Noto Sans KR
ja	Noto Sans, Noto Sans JP
zh-CN / zh-TW / zh-HK 계열	Noto Sans + SC / TC / HK
en 등 라틴 문자	Noto Sans

1. 화면에 실제로 나오는 언어와 Wordmark profile의 family만 불러옵니다. family를 더할수록 첫 화면이 늦어집니다.
2. <html lang>을 실제 언어로 두고, 다른 언어 조각에는 그 요소에 lang을 붙입니다.
3. 화면 캡처, PDF 생성, 시각 회귀 테스트는 운영 글꼴을 불러온 뒤(document.fonts.ready) 실행합니다.

글꼴 파일이 없어도 대체 글꼴로 화면은 그려집니다. 다만 글자 폭과 줄바꿈이 정본과 달라질 수 있습니다.

경계와 예외

• 역할 표는 공통 역할 클래스의 범위입니다. 컴포넌트는 목적에 맞는 크기(예: 10px 배지 숫자)를 직접 가질 수 있습니다.
• MDS 역할 클래스(m-heading-* 등)는 아직 없는 예정 API입니다. 그전까지 MDS 화면은 Tailwind text-*·font-*로 크기와 굵기를 정합니다. 만들 때는 EDS와 같은 이름에 같은 px를 씁니다.
• Print DS는 generic 앞에 Windows 인쇄용 Malgun Gothic을 둡니다. Markdown DS는 운영체제 UI 글꼴 스택을 씁니다.
• 12px보다 작은 읽는 글자는 의도한 예외로 허용하고 알림만 냅니다. 실행으로 재현된 고장만 차단 근거가 됩니다.

정리

• 세 DS의 본문은 Noto이며, 문서 언어에 따라 한자 family의 순서가 바뀝니다.
• 본문 프리셋은 noto·system뿐이고, 다른 글꼴은 문자권 토큰을 바꿔서 씁니다.
• 브랜드 표기는 본문 글꼴과 분리된 Wordmark profile이 소유합니다.
• h1–h6는 구조, e-heading-*는 크기입니다. 굵기 유틸리티는 역할 클래스 위에서만 씁니다.
• 패키지는 본문과 Wordmark 글꼴 파일을 넣지 않으며, 소비 앱이 실제로 쓰는 family만 불러옵니다.

정본

• leysys-design docs/decisions/GLOBAL-FONT-NOTO-UNIFICATION-2026-09-28.md — 본문 글꼴 통일과 프리셋 삭제
• leysys-design docs/decisions/TYPOGRAPHY-ROLE-SCALE-HEADING-SEPARATION-2026-09-26.md — 역할 스케일과 제목 분리
• leysys-design docs/decisions/READING-TEXT-12PX-RECOMMENDATION-2026-09-28.md — 읽는 글자 12px 권장
• leysys-design docs/decisions/TEXT-MD-BASE-VOCABULARY-SEPARATION-2026-05-21.md, UTILITY-TRIAD-CLASSIFICATION-2026-08-04.md — md↔base 어휘 별칭과 .text-md
• leysys-design docs/decisions/BRAND-WORDMARK-TYPOGRAPHY-2026-08-18.md — Wordmark profile
• leysys-design docs/process/CONSUMER-FONT-LOADING-CONTRACT.md — 소비 앱 글꼴 로딩 계약
• leysys-design docs/specs/EDS.md §Typography 역할과 제목 부품 — 현행 값