Overview
타이포그래피는 콘텐츠를 명확하고 효율적으로 표현하기 위한 디자인 요소입니다.
타이포그래피는 모든 디지털 채널에서 텍스트를 명확하고 일관되며 접근 가능하게 표현하기 위한 핵심 요소입니다. 재사용 가능한 토큰과 컴포넌트를 정의함으로써, 본 시스템은 제목, 본문 등 다양한 텍스트 스타일을 체계적으로 관리할 수 있도록 돕습니다. 이를 통해 시각적 계층 구조와 일관성을 유지할 수 있습니다.
개요
SEED 타이포그래피 시스템은 폰트 크기, 줄 높이, 폰트 두께 각각을 토큰으로 정의합니다. 이 토큰들은 두 가지 유형의 텍스트 스타일로 조합됩니다:
- 스케일 텍스트 스타일: t5Regular, t1Bold와 같이 폰트 크기, 줄 높이, 폰트 두께를 축약한 조합입니다. 이 스타일은 제품 전반에 일반적인 텍스트 적용을 빠르게 할 수 있도록 도와줍니다.
- 시맨틱 텍스트 스타일: screenTitle, articleBody와 같이 특정 역할이나 사용 상황에 맞게 구성된 텍스트 스타일입니다. 이 스타일은 디자인 의도를 내포하여 사용자 인터페이스 전반에 일관성을 부여합니다.
글꼴
사용자의 디바이스 환경을 고려하여, 시스템 폰트를 사용합니다. 이는 다양한 국가와 문화권에서 사용되는 여러 기기 및 운영 체제에서 일관된 사용자 경험과 가독성을 보장합니다.
웹에서는 다음과 같은 폰트 스택을 적용할 수 있습니다:
타이포그래피 토큰
폰트 크기 토큰
폰트 크기 토큰은 접근성과 확장성을 위해 상대 단위(rem)를 사용합니다. 이 값들은 기본 설정 기준 1rem = 16px로 계산됩니다.
| 이름 | 값 |
|---|---|
| $font-size.t1 | 11px (0.6875rem) |
| $font-size.t2 | 12px (0.75rem) |
| $font-size.t3 | 13px (0.8125rem) |
| $font-size.t4 | 14px (0.875rem) |
| $font-size.t5 | 16px (1rem) |
| $font-size.t6 | 18px (1.125rem) |
| $font-size.t7 | 20px (1.25rem) |
| $font-size.t8 | 22px (1.375rem) |
| $font-size.t9 | 24px (1.5rem) |
| $font-size.t10 | 26px (1.625rem) |
| $font-size.t2-static | 12px |
| $font-size.t5-static | 16px |
| $font-size.t6-static | 18px |
줄 높이 토큰
줄 높이 토큰은 적절한 수직 리듬과 가독성을 보장합니다. 동일한 순서의 폰트 크기 토큰과 함께 사용하는 것을 권장합니다.
| 이름 | 값 |
|---|---|
| $line-height.t1 | 15px (0.9375rem) |
| $line-height.t2 | 16px (1rem) |
| $line-height.t3 | 18px (1.125rem) |
| $line-height.t4 | 19px (1.1875rem) |
| $line-height.t5 | 22px (1.375rem) |
| $line-height.t6 | 24px (1.5rem) |
| $line-height.t7 | 27px (1.6875rem) |
| $line-height.t8 | 30px (1.875rem) |
| $line-height.t9 | 32px (2rem) |
| $line-height.t10 | 35px (2.1875rem) |
폰트 두께 토큰
명확한 시각적 대비와 계층 구조를 위해 세 가지 폰트 두께 토큰을 정의합니다.
| 이름 | 값 |
|---|---|
| $font-weight.regular | 400 |
| $font-weight.medium | 500 |
| $font-weight.bold | 700 |
타이포그래피 컴포넌트
텍스트 스타일은 토큰들을 조합하여 사용 가능한 컴포넌트로 취급되며, 두 가지 주요 범주로 나뉩니다:
시맨틱 텍스트 스타일
시맨틱 스타일은 UI 내 특정 역할에 맞게 사용됩니다. 이를 통해 텍스트 요소가 일관된 모양과 기능을 가지며, 다음과 같은 역할에 맞게 디자인됩니다:
- screen title: 화면에 크게 표시되는 주요 제목이나 타이틀.
- article body: 게시물이나 콘텐츠 중심 섹션의 본문 텍스트.
textStyle=screenTitle
| 상태 | 슬롯 | 속성 | 값 |
|---|---|---|---|
| enabled | root | fontSize | |
| lineHeight | |||
| fontWeight |
textStyle=articleBody
| 상태 | 슬롯 | 속성 | 값 |
|---|---|---|---|
| enabled | root | fontSize | |
| lineHeight | |||
| fontWeight |
스케일 텍스트 스타일
스케일 스타일은 폰트 크기, 줄 높이, 폰트 두께를 축약하여 빠르게 적용할 수 있습니다.
예를 들어, t4Medium는 폰트 크기가 t4이고 폰트 두께가 medium인 텍스트 스타일을 나타냅니다.
일반적으로 t1-t5는 본문 및 장식적인 텍스트에 사용되며, t6-t10은 제목 및 주요 텍스트에 사용됩니다.
사용 가이드라인
- 일관성 유지: 모든 사례에서 정의된 토큰과 컴포넌트를 사용하여 일관된 타이포그래피를 유지합니다.
- 명확한 계층 구조: 제목과 본문 등의 계층을 명확하게 구분하여, 사용자가 정보를 효율적으로 인식할 수 있도록 합니다.
- 상대 단위 사용: 고정 단위(px) 대신 rem과 같은 상대 단위를 사용하여 사용자의 폰트 크기 설정을 존중합니다.
- 시맨틱 우선: 특정 역할이 요구되는 경우(예: 화면 제목, 게시물 본문) 시맨틱 텍스트 스타일을 사용하여 디자인 의도와 기능을 함께 담아냅니다.
타이포그래피 사용에 도움이 필요하신가요? #design-core 채널에서 질문해주세요.