# Typography
URL: /foundations/typography
Source: https://github.com/daangn/seed-design/blob/dev/docs/content/foundations/typography.mdx

타이포그래피는 콘텐츠를 명확하고 효율적으로 표현하기 위한 디자인 요소입니다.

## Preview

타이포그래피는 모든 디지털 채널에서 텍스트를 명확하고 일관되며 접근 가능하게 표현하기 위한 핵심 요소입니다. 재사용 가능한 토큰과 컴포넌트를 정의함으로써, 본 시스템은 제목, 본문 등 다양한 텍스트 스타일을 체계적으로 관리할 수 있도록 돕습니다. 이를 통해 시각적 계층 구조와 일관성을 유지할 수 있습니다.

## 개요

SEED 타이포그래피 시스템은 폰트 크기, 줄 높이, 폰트 두께 각각을 토큰으로 정의합니다. 이 토큰들은 두 가지 유형의 텍스트 스타일로 조합됩니다:

- **스케일 텍스트 스타일**: t5Regular, t1Bold와 같이 폰트 크기, 줄 높이, 폰트 두께를 축약한 조합입니다. 이 스타일은 제품 전반에 일반적인 텍스트 적용을 빠르게 할 수 있도록 도와줍니다.
- **시맨틱 텍스트 스타일**: screenTitle, articleBody와 같이 특정 역할이나 사용 상황에 맞게 구성된 텍스트 스타일입니다. 이 스타일은 디자인 의도를 내포하여 사용자 인터페이스 전반에 일관성을 부여합니다.

## 글꼴

사용자의 디바이스 환경을 고려하여, 시스템 폰트를 사용합니다. 이는 다양한 국가와 문화권에서 사용되는 여러 기기 및 운영 체제에서 일관된 사용자 경험과 가독성을 보장합니다.

웹에서는 다음과 같은 폰트 스택을 적용할 수 있습니다:

```css
font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo",
  "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif,
  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
```

## 타이포그래피 토큰

### 폰트 크기 토큰

폰트 크기 토큰은 접근성과 확장성을 위해 상대 단위(rem)를 사용합니다. 이 값들은 기본 설정 기준 1rem = 16px로 계산됩니다.

| Token | default |
| --- | --- |
| $font-size.t1 | 0.6875rem (11px) |
| $font-size.t2 | 0.75rem (12px) |
| $font-size.t3 | 0.8125rem (13px) |
| $font-size.t4 | 0.875rem (14px) |
| $font-size.t5 | 1rem (16px) |
| $font-size.t6 | 1.125rem (18px) |
| $font-size.t7 | 1.25rem (20px) |
| $font-size.t8 | 1.375rem (22px) |
| $font-size.t9 | 1.5rem (24px) |
| $font-size.t10 | 1.625rem (26px) |
| $font-size.t11 | 1.75rem (28px) |
| $font-size.t12 | 2rem (32px) |
| $font-size.t13 | 2.5rem (40px) |
| $font-size.t14 | 3rem (48px) |
| $font-size.t1-static | 11px |
| $font-size.t2-static | 12px |
| $font-size.t3-static | 13px |
| $font-size.t4-static | 14px |
| $font-size.t5-static | 16px |
| $font-size.t6-static | 18px |
| $font-size.t7-static | 20px |
| $font-size.t8-static | 22px |
| $font-size.t9-static | 24px |
| $font-size.t10-static | 26px |
| $font-size.t11-static | 28px |
| $font-size.t12-static | 32px |
| $font-size.t13-static | 40px |
| $font-size.t14-static | 48px |

{/* 필요한 경우 고정 크기가 필요한 상황을 위해 픽셀 단위의 토큰(예: $font-size.t2-static, $font-size.t5-static, $font-size.t6-static)도 제공됩니다. */}

### 줄 높이 토큰

줄 높이 토큰은 적절한 수직 리듬과 가독성을 보장합니다. 동일한 순서의 폰트 크기 토큰과 함께 사용하는 것을 권장합니다.

| Token | default |
| --- | --- |
| $line-height.t1 | 0.9375rem (15px) |
| $line-height.t2 | 1rem (16px) |
| $line-height.t3 | 1.125rem (18px) |
| $line-height.t4 | 1.1875rem (19px) |
| $line-height.t5 | 1.375rem (22px) |
| $line-height.t6 | 1.5rem (24px) |
| $line-height.t7 | 1.6875rem (27px) |
| $line-height.t8 | 1.875rem (30px) |
| $line-height.t9 | 2rem (32px) |
| $line-height.t10 | 2.1875rem (35px) |
| $line-height.t11 | 2.375rem (38px) |
| $line-height.t12 | 2.625rem (42px) |
| $line-height.t13 | 3.25rem (52px) |
| $line-height.t14 | 3.75rem (60px) |
| $line-height.t1-static | 15px |
| $line-height.t2-static | 16px |
| $line-height.t3-static | 18px |
| $line-height.t4-static | 19px |
| $line-height.t5-static | 22px |
| $line-height.t6-static | 24px |
| $line-height.t7-static | 27px |
| $line-height.t8-static | 30px |
| $line-height.t9-static | 32px |
| $line-height.t10-static | 35px |
| $line-height.t11-static | 38px |
| $line-height.t12-static | 42px |
| $line-height.t13-static | 52px |
| $line-height.t14-static | 60px |

### 폰트 두께 토큰

명확한 시각적 대비와 계층 구조를 위해 세 가지 폰트 두께 토큰을 정의합니다.

| Token | default |
| --- | --- |
| $font-weight.regular | 400 |
| $font-weight.medium | 500 |
| $font-weight.bold | 700 |

## 타이포그래피 컴포넌트

텍스트 스타일은 토큰들을 조합하여 사용 가능한 컴포넌트로 취급되며, 두 가지 주요 범주로 나뉩니다:

### 시맨틱 텍스트 스타일

시맨틱 스타일은 UI 내 특정 역할에 맞게 사용됩니다. 이를 통해 텍스트 요소가 일관된 모양과 기능을 가지며, 다음과 같은 역할에 맞게 디자인됩니다:

Component spec (JSON): /rootage/components/typography.json

### 스케일 텍스트 스타일

스케일 스타일은 폰트 크기, 줄 높이, 폰트 두께를 축약하여 빠르게 적용할 수 있습니다.

예를 들어, t4Medium는 폰트 크기가 t4이고 폰트 두께가 medium인 텍스트 스타일을 나타냅니다.

일반적으로 t1-t5는 본문 및 장식적인 텍스트에 사용되며, t6-t10은 제목 및 주요 텍스트에 사용됩니다. t11-t14는 더 큰 화면을 위한 대형 제목 스케일로, `sm` breakpoint 이상에서 사용하는 것을 권장합니다.

스케일 텍스트 스타일 중 Static 텍스트 스타일은 Static 폰트 크기 토큰과 Static 줄 높이 토큰을 사용하여 폰트 스케일링에 반응하지 않는 텍스트 스타일을 제공합니다.

Component spec (JSON): /rootage/components/typography.json

## 사용 가이드라인

- **일관성 유지**: 모든 사례에서 정의된 토큰과 컴포넌트를 사용하여 일관된 타이포그래피를 유지합니다.
- **명확한 계층 구조**: 제목과 본문 등의 계층을 명확하게 구분하여, 사용자가 정보를 효율적으로 인식할 수 있도록 합니다.
- **상대 단위 사용**: 고정 단위(px) 대신 rem과 같은 상대 단위를 사용하여 사용자의 폰트 크기 설정을 존중합니다.
- **시맨틱 우선**: 특정 역할이 요구되는 경우(예: 화면 제목, 게시물 본문) 시맨틱 텍스트 스타일을 사용하여 디자인 의도와 기능을 함께 담아냅니다.

## 링크

<Card title="React" description="타이포그래피 컴포넌트를 React로 사용하는 방법을 설명합니다." href="/react/components/typography/text" />