Design Docs

Typography텍스트 스타일링 컴포넌트. TYPOGRAPHY_VARIANTS에 정의된 모든 변형을 variant prop으로 지정할 수 있습니다.

Examples

Heading Sizes제목 크기별 비교

28px Bold24px Bold20px Bold18px Bold

Body Variants본문 텍스트 변형

16px Bold16px Medium16px Regular14px Bold14px Regular

Line Height Variants동일 사이즈/weight에서 line-height 옵션별 비교 (16px Regular 기준)

16px Regular / EXTRA_NARROW (100%)16px Regular / NARROW (125%)16px Regular / MIDDLE (136%)16px Regular / WIDE (164%)16px Regular / MIDDLE_WIDE (174%)16px Regular / EXTRA_WIDE (184%)

Standard Line Heights사이즈별 디자인 시스템 표준 line-height를 적용하는 _STANDARD variant

28px Bold / 38px24px Bold / 32px20px Bold / 28px18px Bold / 26px16px Medium / 24px16px Regular / 24px14px Medium / 20px14px Regular / 20px13px Regular / 18px12px Regular / 18px11px Regular / 16px

Underline밑줄 텍스트

밑줄 텍스트

Props

Name	Type	Default	Required	Description
variant	'28_BOLD_NARROW' \| '28_BOLD_STANDARD' \| '24_BOLD_NARROW' \| '24_BOLD_STANDARD' \| '20_BOLD_MIDDLE' \| '20_BOLD_NARROW' \| '20_BOLD_STANDARD' \| '18_BOLD_NARROW' \| '18_BOLD_MIDDLE' \| '18_BOLD_STANDARD' \| '18_REGULAR_STANDARD' \| '16_BOLD_NARROW' \| '16_BOLD_MIDDLE' \| '16_BOLD_STANDARD' \| '16_MEDIUM_EXTRA_NARROW' \| '16_MEDIUM_STANDARD' \| '16_REGULAR_WIDE' \| '16_REGULAR_STANDARD' \| '14_BOLD_NARROW' \| '14_BOLD_STANDARD' \| '14_MEDIUM_EXTRA_NARROW' \| '14_MEDIUM_STANDARD' \| '14_REGULAR_WIDE' \| '14_REGULAR_STANDARD' \| '13_MEDIUM_EXTRA_NARROW' \| '13_REGULAR_STANDARD' \| '12_BOLD_EXTRA_NARROW' \| '12_BOLD_STANDARD' \| '12_REGULAR_WIDE' \| '12_REGULAR_STANDARD' \| '11_REGULAR_NARROW' \| '11_REGULAR_STANDARD'	16_BOLD_MIDDLE	Yes	타이포그래피 변형 (fontSize_fontWeight_lineHeight)
underline	boolean	false	-	밑줄 표시
children	string	길을 냅니다 자리톡	Yes	텍스트 내용

Name

Type

Default

Required

Description

variant

16_BOLD_MIDDLE

Yes

타이포그래피 변형 (fontSize_fontWeight_lineHeight)

underline

boolean

false

밑줄 표시

children

string

길을 냅니다 자리톡

Yes

텍스트 내용