Foundations
Typography
폰트 패밀리 · 타입 스케일 · 굵기 규칙. 모든 화면이 동일한 타이포그래피 위계를 따릅니다.
Font families
CSS 변수로 정의해 테마·로케일별 교체 가능. next/font 로 self-host (FOUT 없음).
Inter본문 · UI · 제목
The quick brown fox 다람쥐 헌 쳇바퀴
--font-sans · font-sansGeist Mono코드 · 수치 · 토큰
const x = 1_234.56; // ORD-2026
--font-mono · font-monoInstrument Serif강조 · 마케팅 디스플레이
Elegant display headline
--font-serif · font-serifType scale
Tailwind 텍스트 스케일 기반. 제목은 tracking-tight 로 약간 좁게.
Display
48px / 3rem
Aa 가나다 Groudit
Hero 타이틀H1
36px / 2.25rem
Aa 가나다 Groudit
페이지 제목H2
24px / 1.5rem
Aa 가나다 Groudit
섹션 제목H3
20px / 1.25rem
Aa 가나다 Groudit
하위 섹션Lead
18px / 1.125rem
Aa 가나다 Groudit
도입 문단Body
16px / 1rem
Aa 가나다 Groudit
기본 본문Small
14px / 0.875rem
Aa 가나다 Groudit
보조 텍스트 · UICaption
12px / 0.75rem
Aa 가나다 Groudit
라벨 · 캡션Font weight
4단계만 사용 — 일관성 유지.
| Weight | 값 | 미리보기 | Tailwind |
|---|---|---|---|
| Normal | 400 | 다람쥐 Aa 123 — 본문 | font-normal |
| Medium | 500 | 다람쥐 Aa 123 — 라벨 · 버튼 | font-medium |
| Semibold | 600 | 다람쥐 Aa 123 — 섹션 제목 | font-semibold |
| Bold | 700 | 다람쥐 Aa 123 — 페이지 제목 · 강조 | font-bold |