← 목록으로
타이포그래피 스케일
폰트 패밀리, 크기 스케일, 행간, 굵기 정의
폰트 패밀리
Sans-serif (본문)
The quick brown fox jumps over the lazy dog
-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto
Monospace (코드)
const hello = "world";
'Courier New', Courier, monospace
실제 사용 예시
디자인 시스템
타이포그래피의 중요성
좋은 타이포그래피는 가독성을 높이고 사용자 경험을 향상시킵니다.
일관된 크기 스케일과 적절한 행간 설정이 핵심입니다.
본문 텍스트는 16-18px 크기에 1.6-1.75 행간이 최적입니다.
모바일에서도 편안한 읽기 경험을 제공할 수 있습니다.
87. 타이포그래피 스케일
Define typography system:
**Font Families**:
- sans: Inter, system-ui, sans-serif
- serif: Georgia, serif (if used)
- mono: JetBrains Mono, monospace
**Font Size Scale**:
- xs: 12px / 0.75rem
- sm: 14px / 0.875rem
- base: 16px / 1rem
- lg: 18px / 1.125rem
- xl: 20px / 1.25rem
- 2xl: 24px / 1.5rem
- 3xl: 30px / 1.875rem
- 4xl: 36px / 2.25rem
- 5xl: 48px / 3rem
- 6xl: 60px / 3.75rem
**Line Heights**:
- none: 1
- tight: 1.25
- snug: 1.375
- normal: 1.5
- relaxed: 1.625
- loose: 2
**Recommended Pairings**:
- Body text: 16px/1.5 (base/normal)
- Small text: 14px/1.5 (sm/normal)
- Headings: size/tight or snug
- Large display: 48px+/tight
**Font Weights**:
- light: 300
- normal: 400
- medium: 500
- semibold: 600
- bold: 700
- extrabold: 800
**Letter Spacing**:
- tighter: -0.05em
- tight: -0.025em
- normal: 0
- wide: 0.025em
- wider: 0.05em
- widest: 0.1em
**Heading Styles**:
- h1: 48px/1.1, bold
- h2: 36px/1.2, bold
- h3: 30px/1.25, semibold
- h4: 24px/1.3, semibold
- h5: 20px/1.4, medium
- h6: 18px/1.4, medium
**Body Styles**:
- body-lg: 18px/1.6
- body: 16px/1.6
- body-sm: 14px/1.5
**Special Styles**:
- caption: 12px/1.4, gray-600
- overline: 12px/1, uppercase, tracking-wider
- code: 14px, mono, gray-800
**Responsive Typography**:
- Scale down headings on mobile
- h1: 48px → 32px on mobile
- Maintain readability
Tech: Tailwind typography config + CSS custom properties