Typography
타이포그래피 시스템은 정보의 전달력을 높이고 UI의 일관성을 유지하는 역할을 해요.
글꼴, 크기, 두께, 간격, 계층 구조 등을 체계적으로 정의하면 가독성이 높아지고, 콘텐츠의 중요도에 따른 시각적 위계를 효과적으로 표현할 수 있어요.
프리텐다드
Pretendard 프리텐다드 プリテンダード
Font Weight
Pretendard 프리텐다드 Regular 400
Pretendard 프리텐다드 Medium 500
Pretendard 프리텐다드 Bold 700
Font size
각 스타일은 --typography-{style}-font-family · -font-size · -line-height 세 토큰으로 제공돼요. font-size 는 뷰포트 768px 이하에서 모바일 값으로 자동 전환돼요(아래 Usage 표).
| Style | Token | Size | Line-height | rem |
|---|---|---|---|---|
| Display | --typography-display-* | 40px | 140% | 2.5 rem |
| Title | --typography-title-* | 32px | 140% | 2.0 rem |
| Heading1 | --typography-heading1-* | 28px | 140% | 1.75 rem |
| Heading2 | --typography-heading2-* | 24px | 140% | 1.5 rem |
| Heading3 | --typography-heading3-* | 20px | 140% | 1.25 rem |
| Heading4 | --typography-heading4-* | 18px | 140% | 1.125 rem |
| Body1 | --typography-body1-* | 16px | 150% | 1.0 rem |
| Body2 | --typography-body2-* | 14px | 150% | 0.875 rem |
| Body3 | --typography-body3-* | 13px | 150% | 0.8125 rem |
| Caption1 | --typography-caption1-* | 12px | 130% | 0.75 rem |
| Caption2 | --typography-caption2-* | 11px | 130% | 0.6875 rem |
Label Button
버튼 레이블 전용 스타일 2종이에요. 11단계 스케일과 달리 font-weight 토큰을 포함해요. Button 컴포넌트가 이 스타일을 사용해요.
| Style | Token | Spec | 용도 |
|---|---|---|---|
| Label Button | --typography-label-button-* | 16px · 700 · 140% | 기본 버튼 레이블 (Button 48px+ 급) |
| Label Button SM | --typography-label-button-sm-* | 14px · 500 · 140% | 소형 버튼 레이블 (Button 40px 이하) |
Usage
Responsive Style
PC ver.
Display40px
Title32px
Heading128px
Heading224px
Heading320px
Heading418px
Body116px
Body214px
Body313px
Caption112px
Caption211px
Mobile ver.
Display32px
Title28px
Heading124px
Heading220px
Heading318px
Heading416px
Body114px
Body213px
Body312px
Caption111px
Caption210px
호환 별칭 대응표
컴포넌트 코드와 일부 문서는 아직 옛 이름 --font-size-* 를 써요. 전부 정본 --typography-{style}-font-size 로 연결돼 있으니 같은 값이고, 새로 쓸 땐 정본 이름을 쓰세요.
| Style | 정본 토큰 | PC / Mobile | 호환 별칭 | 사용 예 |
|---|---|---|---|---|
| Display | --typography-display-font-size | 40px / 32px | --font-size-5xl | — |
| Title | --typography-title-font-size | 32px / 28px | --font-size-4xl | 페이지 제목(h1) |
| Heading1 | --typography-heading1-font-size | 28px / 24px | --font-size-3xl | — |
| Heading2 | --typography-heading2-font-size | 24px / 20px | --font-size-2xl | — |
| Heading3 | --typography-heading3-font-size | 20px / 18px | --font-size-xl | — |
| Heading4 | --typography-heading4-font-size | 18px / 16px | --font-size-lg | Button 64px |
| Body1 | --typography-body1-font-size | 16px / 14px | --font-size-md | Button 48–54px · 본문 |
| Body2 | --typography-body2-font-size | 14px / 13px | --font-size-sm | Button 32–40px · 보조 텍스트 |
| Body3 | --typography-body3-font-size | 13px / 12px | --font-size-xs | Button 24px · 캡션 |
| Caption1 | --typography-caption1-font-size | 12px / 11px | --font-size-xxs | — |
| Caption2 | --typography-caption2-font-size | 11px / 10px | --font-size-xxxs | — |