Foundation
Typography
글꼴, 크기, 두께, 줄 높이, 자간을 20개 용도별 recipe로 적용합니다.
Primitive ingredients
Primitive는 family, size, line height, weight, letter spacing의 단일 값입니다. 제품 화면에서는 이 값을 따로 조립하지 않고 semantic recipe 하나로 다섯 값을 함께 적용합니다.
text-body-2 하나가 family, size, weight, line height, letter spacing을 설정하고 각 속성은 아래처럼 primitive를 참조합니다. 제품에서는 개별 값을 조합하지 말고 role에 맞는 recipe를 선택합니다.
- Family
--typography-body-2-font-familyvar(--font-family-sans) → Pretendard, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif- Size
--typography-body-2-font-sizevar(--font-size-sm) → 0.875rem- Weight
--typography-body-2-font-weightvar(--font-weight-regular) → 400- Line height
--typography-body-2-line-heightvar(--line-height-150) → 1.5- Letter spacing
--typography-body-2-letter-spacingvar(--letter-spacing-000) → 0
- --font-family-sans
- Pretendard, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif
- --font-family-mono
- "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace
- --font-size-2xs
- 0.6875rem
- --font-size-xs
- 0.75rem
- --font-size-sm
- 0.875rem
- --font-size-md
- 1rem
- --font-size-lg
- 1.125rem
- --font-size-xl
- 1.25rem
- --font-size-2xl
- 1.5rem
- --font-size-3xl
- 1.875rem
- --font-size-4xl
- 2.25rem
- --font-size-5xl
- 3rem
- --font-weight-regular
- 400
- --font-weight-medium
- 500
- --font-weight-semibold
- 600
- --font-weight-bold
- 700
- --line-height-100
- 1
- --line-height-115
- 1.15
- --line-height-130
- 1.3
- --line-height-140
- 1.4
- --line-height-150
- 1.5
- --line-height-160
- 1.6
- --letter-spacing-n040
- -0.04em
- --letter-spacing-n020
- -0.02em
- --letter-spacing-n010
- -0.01em
- --letter-spacing-000
- 0
- --letter-spacing-p010
- 0.01em
- --letter-spacing-p080
- 0.08em
Semantic recipes
20개 recipe는 역할과 단계를 고르면 다섯 지표를 함께 적용합니다. 같은 크기처럼 보여도 책임이 다르면 별도 recipe를 유지해 제품이 역할별로 조정할 수 있게 합니다. 숫자는 DOM heading level이 아닌 시각적 tier이며 모든 family에서 1이 가장 강합니다.
Display
짧고 강한 메시지에만 쓰는 가장 큰 표현 계층입니다.
Heading
페이지와 큰 섹션의 시각적 위계를 세웁니다. 숫자는 DOM h1–h3와 무관하며 1이 가장 강합니다.
Title
한 컴포넌트나 콘텐츠 묶음의 이름을 짧게 전달합니다.
Body
문장과 문단을 읽는 기본 계층입니다. 긴 본문은 한 줄을 약 60–75자로 제한합니다.
Label
짧은 control 이름과 실행 문구처럼 스캔이 빨라야 하는 텍스트입니다.
Caption
주 콘텐츠를 보충하는 출처, 상태, 시간 정보를 낮은 위계로 표시합니다.
Overline
다음 콘텐츠의 범주를 먼저 알리는 짧은 kicker입니다.
Code
식별자와 코드의 문자 폭을 유지하는 mono 계층입니다.
HTML heading level과 recipe 이름은 같은 계약이 아닙니다.
문서 구조에 맞는 h1–h6를 먼저 선택하고 시각적 위계는 heading이나 title recipe로 지정합니다. Display는 모든 h1의 기본값이 아니라 짧은 hero 메시지를 위한 선택입니다.
Responsive composition
각 recipe의 다섯 값은 viewport에 따라 몰래 바뀌지 않습니다. 화면이 좁아지면 breakpoint에서 같은 family의 인접 단계로 recipe 전체를 명시적으로 교체합니다. Body, Label, Caption, Code는 원칙적으로 viewport와 관계없이 고정합니다.
복잡함을 명료한 흐름으로
복잡함을 명료한 흐름으로
한 breakpoint에서 다섯 지표를 함께 바꿉니다.
Tailwind에서는 text-display-2 md:text-display-1처럼 recipe를 교체합니다. font size만 줄이고 기존 line height나 letter spacing을 남기지 않습니다. 모바일 input 값은 브라우저 자동 확대를 피하도록 16px 미만의 recipe를 사용하지 않습니다.
사용 기준
- 글의 용도를 display, heading, title, body, label, caption, overline, code 중에서 먼저 고르고 크기 단계를 선택합니다.
- 크기만 보고 recipe를 고르거나 font size, line height, weight, letter spacing 중 일부만 분리해 덮어쓰지 마세요.
검증 기준
- HTML 제목 레벨은 문서 구조로, typography recipe는 표현 크기로 정합니다.
- 390px 화면과 200% 확대에서 display, 긴 토큰, code가 잘리거나 가로 스크롤을 만들지 않아야 합니다.
- 본문은 읽기 폭을 약 60–75자로 제한하고 3줄 이상인 텍스트에 충분한 line height를 유지합니다.
- 모바일 input 값에는 16px 미만의 typography recipe를 사용하지 않습니다.
- 글꼴 파일은 소비 앱에서 불러오고, package recipe는 크기·줄 높이·자간·두께를 함께 적용합니다.