Typography
텍스트 스타일과 타이포그래피 시스템. Heading(1-7), Body(1-4), Caption(1-2) 시맨틱 토큰 제공.
Font: Pretendard Variable, Pretendard, sans-serif
Usage
import { global, semantic } from '@featuring-corp/design-tokens';
// Global Typography
console.log(global.typography.font.sans); // "Pretendard Variable, Pretendard, sans-serif"
console.log(global.typography.fontSize[400]); // "1rem"
console.log(global.typography.fontWeight.medium); // "500"
console.log(global.typography.lineHeight[400]); // "1.5rem"
// Semantic Typography
console.log(semantic.typography.heading[3].fontSize); // "var(--global-typography-fontSize-400)"
console.log(semantic.typography.body[2].lineHeight); // "var(--global-typography-lineHeight-300)"/* CSS에서 사용 */
.heading {
font-size: var(--semantic-typography-heading-3-fontSize);
font-weight: var(--semantic-typography-heading-3-fontWeight);
line-height: var(--semantic-typography-heading-3-lineHeight);
}Heading
Heading 1
| Property | Token | Value |
|---|---|---|
| Font Size | var(--global-typography-fontSize-200) | 0.75rem |
| Font Weight | var(--global-typography-fontWeight-medium) | 500 |
| Line Height | var(--global-typography-lineHeight-200) | 1.125rem |
다람쥐 헌 쳇바퀴에 타고파
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Heading 2
| Property | Token | Value |
|---|---|---|
| Font Size | var(--global-typography-fontSize-300) | 0.875rem |
| Font Weight | var(--global-typography-fontWeight-medium) | 500 |
| Line Height | var(--global-typography-lineHeight-300) | 1.375rem |
다람쥐 헌 쳇바퀴에 타고파
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Heading 3
| Property | Token | Value |
|---|---|---|
| Font Size | var(--global-typography-fontSize-400) | 1rem |
| Font Weight | var(--global-typography-fontWeight-medium) | 500 |
| Line Height | var(--global-typography-lineHeight-400) | 1.5rem |
다람쥐 헌 쳇바퀴에 타고파
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Heading 4
| Property | Token | Value |
|---|---|---|
| Font Size | var(--global-typography-fontSize-500) | 1.25rem |
| Font Weight | var(--global-typography-fontWeight-medium) | 500 |
| Line Height | var(--global-typography-lineHeight-500) | 1.75rem |
다람쥐 헌 쳇바퀴에 타고파
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Heading 5
| Property | Token | Value |
|---|---|---|
| Font Size | var(--global-typography-fontSize-600) | 1.5rem |
| Font Weight | var(--global-typography-fontWeight-medium) | 500 |
| Line Height | var(--global-typography-lineHeight-600) | 2.125rem |
다람쥐 헌 쳇바퀴에 타고파
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Heading 6
| Property | Token | Value |
|---|---|---|
| Font Size | var(--global-typography-fontSize-700) | 2rem |
| Font Weight | var(--global-typography-fontWeight-medium) | 500 |
| Line Height | var(--global-typography-lineHeight-700) | 2.5rem |
다람쥐 헌 쳇바퀴에 타고파
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Heading 7
| Property | Token | Value |
|---|---|---|
| Font Size | var(--global-typography-fontSize-800) | 2.5rem |
| Font Weight | var(--global-typography-fontWeight-medium) | 500 |
| Line Height | var(--global-typography-lineHeight-800) | 3.25rem |
다람쥐 헌 쳇바퀴에 타고파
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Body
Body 1
| Property | Token | Value |
|---|---|---|
| Font Size | var(--global-typography-fontSize-200) | 0.75rem |
| Font Weight | var(--global-typography-fontWeight-regular) | 400 |
| Line Height | var(--global-typography-lineHeight-200) | 1.125rem |
다람쥐 헌 쳇바퀴에 타고파
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Body 2
| Property | Token | Value |
|---|---|---|
| Font Size | var(--global-typography-fontSize-300) | 0.875rem |
| Font Weight | var(--global-typography-fontWeight-regular) | 400 |
| Line Height | var(--global-typography-lineHeight-300) | 1.375rem |
다람쥐 헌 쳇바퀴에 타고파
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Body 3
| Property | Token | Value |
|---|---|---|
| Font Size | var(--global-typography-fontSize-400) | 1rem |
| Font Weight | var(--global-typography-fontWeight-regular) | 400 |
| Line Height | var(--global-typography-lineHeight-400) | 1.5rem |
다람쥐 헌 쳇바퀴에 타고파
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Body 4
| Property | Token | Value |
|---|---|---|
| Font Size | var(--global-typography-fontSize-450) | 1.125rem |
| Font Weight | var(--global-typography-fontWeight-regular) | 400 |
| Line Height | var(--global-typography-lineHeight-450) | 1.625rem |
다람쥐 헌 쳇바퀴에 타고파
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Caption
Caption 1
| Property | Token | Value |
|---|---|---|
| Font Size | var(--global-typography-fontSize-100) | 0.6875rem |
| Font Weight | var(--global-typography-fontWeight-regular) | 400 |
| Line Height | var(--global-typography-lineHeight-100) | 1rem |
다람쥐 헌 쳇바퀴에 타고파
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Caption 2
| Property | Token | Value |
|---|---|---|
| Font Size | var(--global-typography-fontSize-200) | 0.75rem |
| Font Weight | var(--global-typography-fontWeight-regular) | 400 |
| Line Height | var(--global-typography-lineHeight-200) | 1.125rem |
다람쥐 헌 쳇바퀴에 타고파
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
전체 토큰 목록
Heading
--semantic-typography-heading-1-fontSize: var(--global-typography-fontSize-200)
--semantic-typography-heading-1-fontWeight: var(--global-typography-fontWeight-medium)
--semantic-typography-heading-1-lineHeight: var(--global-typography-lineHeight-200)
--semantic-typography-heading-2-fontSize: var(--global-typography-fontSize-300)
--semantic-typography-heading-2-fontWeight: var(--global-typography-fontWeight-medium)
--semantic-typography-heading-2-lineHeight: var(--global-typography-lineHeight-300)
--semantic-typography-heading-3-fontSize: var(--global-typography-fontSize-400)
--semantic-typography-heading-3-fontWeight: var(--global-typography-fontWeight-medium)
--semantic-typography-heading-3-lineHeight: var(--global-typography-lineHeight-400)
--semantic-typography-heading-4-fontSize: var(--global-typography-fontSize-500)
--semantic-typography-heading-4-fontWeight: var(--global-typography-fontWeight-medium)
--semantic-typography-heading-4-lineHeight: var(--global-typography-lineHeight-500)
--semantic-typography-heading-5-fontSize: var(--global-typography-fontSize-600)
--semantic-typography-heading-5-fontWeight: var(--global-typography-fontWeight-medium)
--semantic-typography-heading-5-lineHeight: var(--global-typography-lineHeight-600)
--semantic-typography-heading-6-fontSize: var(--global-typography-fontSize-700)
--semantic-typography-heading-6-fontWeight: var(--global-typography-fontWeight-medium)
--semantic-typography-heading-6-lineHeight: var(--global-typography-lineHeight-700)
--semantic-typography-heading-7-fontSize: var(--global-typography-fontSize-800)
--semantic-typography-heading-7-fontWeight: var(--global-typography-fontWeight-medium)
--semantic-typography-heading-7-lineHeight: var(--global-typography-lineHeight-800)Body
--semantic-typography-body-1-fontSize: var(--global-typography-fontSize-200)
--semantic-typography-body-1-fontWeight: var(--global-typography-fontWeight-regular)
--semantic-typography-body-1-lineHeight: var(--global-typography-lineHeight-200)
--semantic-typography-body-2-fontSize: var(--global-typography-fontSize-300)
--semantic-typography-body-2-fontWeight: var(--global-typography-fontWeight-regular)
--semantic-typography-body-2-lineHeight: var(--global-typography-lineHeight-300)
--semantic-typography-body-3-fontSize: var(--global-typography-fontSize-400)
--semantic-typography-body-3-fontWeight: var(--global-typography-fontWeight-regular)
--semantic-typography-body-3-lineHeight: var(--global-typography-lineHeight-400)
--semantic-typography-body-4-fontSize: var(--global-typography-fontSize-450)
--semantic-typography-body-4-fontWeight: var(--global-typography-fontWeight-regular)
--semantic-typography-body-4-lineHeight: var(--global-typography-lineHeight-450)Caption
--semantic-typography-caption-1-fontSize: var(--global-typography-fontSize-100)
--semantic-typography-caption-1-fontWeight: var(--global-typography-fontWeight-regular)
--semantic-typography-caption-1-lineHeight: var(--global-typography-lineHeight-100)
--semantic-typography-caption-2-fontSize: var(--global-typography-fontSize-200)
--semantic-typography-caption-2-fontWeight: var(--global-typography-fontWeight-regular)
--semantic-typography-caption-2-lineHeight: var(--global-typography-lineHeight-200)