Typography
디자인 시스템의 타이포그래피 스케일을 확인할 수 있습니다.
타이포그래피는 콘텐츠를 명확하고 효율적으로 표현하기 위한 디자인 요소입니다.
타이포그래피는 모든 디지털 채널에서 텍스트를 명확하고 일관되며 접근 가능하게 표현하기 위한 핵심 요소입니다. 재사용 가능한 토큰과 스타일을 정의함으로써, 본 시스템은 제목, 본문 등 다양한 텍스트 스타일을 체계적으로 관리할 수 있도록 돕습니다. 이를 통해 시각적 계층 구조와 일관성을 유지할 수 있습니다.
개요
AIFT 타이포그래피 시스템은 폰트 크기, 줄 높이, 자간, 폰트 두께를 각각 토큰으로 정의합니다. 이 토큰들은 시맨틱 텍스트 스타일로 조합됩니다:
- 시맨틱 텍스트 스타일: display, headline, title, body, label, caption과 같이 특정 역할이나 사용 상황에 맞게 구성된 텍스트 스타일입니다. 이 스타일은 디자인 의도를 내포하여 사용자 인터페이스 전반에 일관성을 부여합니다.
글꼴
기본 폰트는 Pretendard Variable입니다. 다양한 국가와 문화권에서 사용되는 여러 기기 및 운영 체제에서 일관된 사용자 경험과 가독성을 보장합니다.
웹에서는 다음과 같은 폰트 스택을 적용합니다:
font-family: 'Pretendard Variable', 'Pretendard', -apple-system, BlinkMacSystemFont,
system-ui, Roboto, 'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo',
'Noto Sans KR', 'Malgun Gothic', sans-serif,
'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';@theme에서 --font-family-pretendard-variable로 참조합니다.
타이포그래피 토큰
폰트 크기 토큰
| 이름 | 변수 | 값 |
|---|---|---|
| Display 1 | --font-size-display-1 | 56px |
| Display 2 | --font-size-display-2 | 48px |
| Display 3 | --font-size-display-3 | 40px |
| Headline 1 | --font-size-headline-1 | 36px |
| Headline 2 | --font-size-headline-2 | 32px |
| Headline 3 | --font-size-headline-3 | 28px |
| Title 1 | --font-size-title-1 | 24px |
| Title 2 | --font-size-title-2 | 20px |
| Title 3 | --font-size-title-3 | 18px |
| Title 4 | --font-size-title-4 | 16px |
| Body 1 | --font-size-body-1 | 16px |
| Body 2 | --font-size-body-2 | 14px |
| Label 1 | --font-size-label-1 | 14px |
| Label 2 | --font-size-label-2 | 12px |
| Caption 1 | --font-size-caption-1 | 14px |
| Caption 2 | --font-size-caption-2 | 12px |
| Caption 3 | --font-size-caption-3 | 10px |
줄 높이 토큰
줄 높이 토큰은 적절한 수직 리듬과 가독성을 보장합니다. 동일한 순서의 폰트 크기 토큰과 함께 사용하는 것을 권장합니다.
| 이름 | 변수 | 값 |
|---|---|---|
| Display 1 | --line-height-display-1 | 72px |
| Display 2 | --line-height-display-2 | 62px |
| Display 3 | --line-height-display-3 | 52px |
| Headline 1 | --line-height-headline-1 | 48px |
| Headline 2 | --line-height-headline-2 | 42px |
| Headline 3 | --line-height-headline-3 | 38px |
| Title 1 | --line-height-title-1 | 32px |
| Title 2 | --line-height-title-2 | 28px |
| Title 3 | --line-height-title-3 | 26px |
| Title 4 | --line-height-title-4 | 26px |
| Body 1 | --line-height-body-1 | 16px |
| Body 2 | --line-height-body-2 | 14px |
| Label 1 | --line-height-label-1 | 14px |
| Label 2 | --line-height-label-2 | 12px |
| Caption 1 | --line-height-caption-1 | 14px |
| Caption 2 | --line-height-caption-2 | 12px |
| Caption 3 | --line-height-caption-3 | 10px |
폰트 두께 토큰
명확한 시각적 대비와 계층 구조를 위해 세 가지 폰트 두께 토큰을 정의합니다.
| 이름 | 변수 | 값 |
|---|---|---|
| Regular | --font-weight-regular | 400 |
| Medium | --font-weight-medium | 500 |
| Semibold | --font-weight-semibold | 600 |
자간 토큰
각 시맨틱 스타일마다 최적화된 letter-spacing 값을 제공합니다.
| 이름 | 변수 |
|---|---|
| Display 1–3 | --letter-spacing-display-* |
| Headline 1–3 | --letter-spacing-headline-* |
| Title 1–4 | --letter-spacing-title-* |
| Body 1–2 | --letter-spacing-body-* |
| Label 1–2 | --letter-spacing-label-* |
| Caption 1–3 | --letter-spacing-caption-* |
타이포그래피 컴포넌트
텍스트 스타일은 토큰들을 조합하여 사용 가능한 유틸리티 클래스로 제공되며, 시맨틱 텍스트 스타일로 구성됩니다.
시맨틱 텍스트 스타일
시맨틱 스타일은 UI 내 특정 역할에 맞게 사용됩니다. 이를 통해 텍스트 요소가 일관된 모양과 기능을 가지며, 다음과 같은 역할에 맞게 디자인됩니다:
Display
화면에 크게 표시되는 주요 제목이나 히어로 영역에 사용합니다.
| 스타일 | 클래스 | 폰트 크기 | 줄 높이 |
|---|---|---|---|
| Display 1 | typography-display-1 | 56px | 72px |
| Display 2 | typography-display-2 | 48px | 62px |
| Display 3 | typography-display-3 | 40px | 52px |
Headline
섹션 제목이나 페이지 내 주요 구분에 사용합니다.
| 스타일 | 클래스 | 폰트 크기 | 줄 높이 |
|---|---|---|---|
| Headline 1 | typography-headline-1 | 36px | 48px |
| Headline 2 | typography-headline-2 | 32px | 42px |
| Headline 3 | typography-headline-3 | 28px | 38px |
Title
카드·패널 제목, 리스트 항목 제목 등에 사용합니다.
| 스타일 | 클래스 | 폰트 크기 | 줄 높이 |
|---|---|---|---|
| Title 1 | typography-title-1 | 24px | 32px |
| Title 2 | typography-title-2 | 20px | 28px |
| Title 3 | typography-title-3 | 18px | 26px |
| Title 4 | typography-title-4 | 16px | 26px |
Body
게시물이나 콘텐츠 중심 섹션의 본문 텍스트에 사용합니다.
| 스타일 | 클래스 | 폰트 크기 | 줄 높이 |
|---|---|---|---|
| Body 1 | typography-body-1 | 16px | 16px |
| Body 2 | typography-body-2 | 14px | 14px |
Label
폼 라벨, 버튼 텍스트, 탭 라벨 등에 사용합니다.
| 스타일 | 클래스 | 폰트 크기 | 줄 높이 |
|---|---|---|---|
| Label 1 | typography-label-1 | 14px | 14px |
| Label 2 | typography-label-2 | 12px | 12px |
Caption
캡션, 힌트, 보조 설명, 에러 메시지 등에 사용합니다.
| 스타일 | 클래스 | 폰트 크기 | 줄 높이 |
|---|---|---|---|
| Caption 1 | typography-caption-1 | 14px | 14px |
| Caption 2 | typography-caption-2 | 12px | 12px |
| Caption 3 | typography-caption-3 | 10px | 10px |
사용 방법
HTML 요소에 아래와 같이 유틸리티 클래스를 적용합니다.
<h1 class="typography-display-1">큰 제목</h1>
<p class="typography-body-1">본문 텍스트</p>
<span class="typography-label-2">라벨</span>global.css의 @layer utilities에 정의된 .typography-* 클래스를 사용합니다.