타이포그래피
폰트 패밀리
| 역할 |
폰트 |
적용 범위 |
| 기본 (한글) |
Pretendard Variable / Pretendard |
모든 UI 텍스트 |
| 기본 (영문/숫자) |
Inter |
영문 전용 컨텍스트 |
| 코드 |
JetBrains Mono / Fira Code |
코드 블록, API Key 등 |
CSS 변수:
--font-sans: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont,
system-ui, Roboto, 'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo',
'Noto Sans KR', 'Malgun Gothic', sans-serif;
--font-mono: 'JetBrains Mono', 'Fira Code', Consolas, Monaco, 'Courier New', monospace;
타입 스케일
8단계 스케일. rem 단위 기준 (root 16px).
| 단계 |
이름 |
px |
rem |
line-height |
weight |
용도 |
| 1 |
Display |
48px |
3rem |
1.2 |
700 |
히어로, 랜딩 |
| 2 |
H1 |
36px |
2.25rem |
1.2 |
700 |
페이지 제목 |
| 3 |
H2 |
30px |
1.875rem |
1.25 |
600 |
섹션 제목 |
| 4 |
H3 |
24px |
1.5rem |
1.3 |
600 |
카드 제목 |
| 5 |
Body-lg |
18px |
1.125rem |
1.6 |
400 |
강조 본문 |
| 6 |
Body |
16px |
1rem |
1.6 |
400 |
기본 본문 |
| 7 |
Caption |
14px |
0.875rem |
1.5 |
400 |
레이블, 보조 |
| 8 |
Overline |
12px |
0.75rem |
1.5 |
500 |
카테고리, 태그 |
Font Weight
| 값 |
이름 |
사용처 |
| 300 |
Light |
큰 디스플레이 텍스트 부제목 |
| 400 |
Regular |
기본 본문 |
| 500 |
Medium |
캡션, Overline, 강조 레이블 |
| 600 |
SemiBold |
H2, H3, 버튼 |
| 700 |
Bold |
Display, H1, 강조 수치 |
Tailwind 클래스 매핑
| 단계 |
Tailwind 클래스 |
| Display |
text-5xl font-bold leading-tight |
| H1 |
text-4xl font-bold leading-tight |
| H2 |
text-3xl font-semibold leading-snug |
| H3 |
text-2xl font-semibold leading-snug |
| Body-lg |
text-lg font-normal leading-relaxed |
| Body |
text-base font-normal leading-relaxed |
| Caption |
text-sm font-normal leading-normal |
| Overline |
text-xs font-medium leading-normal tracking-wide uppercase |
한글 타이포그래피 규칙
word-break: keep-all 적용 — 단어 중간에서 줄바꿈 방지- 한글 사용 시
letter-spacing 조정 금지 (Pretendard 기본값 유지)
- 본문 최대 너비:
max-w-prose (65ch) — 가독성 확보
/* 전역 적용 권장 */
p, li, dd {
word-break: keep-all;
}
색상 규칙
| 상황 |
클래스 |
| 제목, 본문 |
text-[var(--color-text-primary)] |
| 보조 설명 |
text-[var(--color-text-secondary)] |
| placeholder, 비활성 |
text-[var(--color-text-tertiary)] |
| 링크 |
text-[var(--color-primary)] hover:text-[var(--color-primary-hover)] |
| 위험/오류 |
text-[var(--color-danger)] |
HYOJIN
c2a71c1b77