Typography

Pretendard 기반 10-step scale. H2/Title/Subtitle/Body/Label.

서체

Pretendard Variable — 한국어·라틴 모두 담당. Inter는 라틴 폴백.
JetBrains Mono — 라틴 전용 (코드·라벨·메타). 한국어 라벨은 sans.

스케일

10-step: H2-32 / Title3-18 / Subtitle 2-6 / Body 4-7 / Label5-10. 각 스텝은 size + line-height + weight가 한 쌍. size만 선택하고 line-height를 직접 조합하지 말 것.

한국어 특화

word-break: keep-all + overflow-wrap: break-word — 단어 중간 끊김 방지
헤딩에 text-wrap: balance — 줄바꿈 자연스러움
숫자는 font-variant-numeric: tabular-nums — 날짜·카운트 정렬

token	value	specimen
`wds.typography.body.body1`	[object Object]	다람쥐 헌 쳇바퀴에 타고파 · AaBbCc
`wds.typography.body.body2`	[object Object]	다람쥐 헌 쳇바퀴에 타고파 · AaBbCc
`wds.typography.body.body3`	[object Object]	다람쥐 헌 쳇바퀴에 타고파 · AaBbCc
`wds.typography.body.body4`	[object Object]	다람쥐 헌 쳇바퀴에 타고파 · AaBbCc
`wds.typography.caption.caption1`	[object Object]	다람쥐 헌 쳇바퀴에 타고파 · AaBbCc
`wds.typography.caption.caption2`	[object Object]	다람쥐 헌 쳇바퀴에 타고파 · AaBbCc
`wds.typography.font-family.primary`	Pretendard	다람쥐 헌 쳇바퀴에 타고파 · AaBbCc
`wds.typography.font-family.system`	SF Pro Display	다람쥐 헌 쳇바퀴에 타고파 · AaBbCc
`wds.typography.font-size.2xl`	20px	다람쥐 헌 쳇바퀴에 타고파 · AaBbCc
`wds.typography.font-size.2xs`	11px	다람쥐 헌 쳇바퀴에 타고파 · AaBbCc
`wds.typography.font-size.3xl`	24px	다람쥐 헌 쳇바퀴에 타고파 · AaBbCc
`wds.typography.font-size.3xs`	10px	다람쥐 헌 쳇바퀴에 타고파 · AaBbCc
`wds.typography.font-size.4xl`	27px	다람쥐 헌 쳇바퀴에 타고파 · AaBbCc
`wds.typography.font-size.5xl`	32px	다람쥐 헌 쳇바퀴에 타고파 · AaBbCc
`wds.typography.font-size.6xl`	36px	다람쥐 헌 쳇바퀴에 타고파 · AaBbCc
`wds.typography.font-size.lg`	16px	다람쥐 헌 쳇바퀴에 타고파 · AaBbCc
`wds.typography.font-size.md`	14px	다람쥐 헌 쳇바퀴에 타고파 · AaBbCc
`wds.typography.font-size.sm`	13px	다람쥐 헌 쳇바퀴에 타고파 · AaBbCc
`wds.typography.font-size.xl`	18px	다람쥐 헌 쳇바퀴에 타고파 · AaBbCc
`wds.typography.font-size.xs`	12px	다람쥐 헌 쳇바퀴에 타고파 · AaBbCc
`wds.typography.font-weight.bold`	700	다람쥐 헌 쳇바퀴에 타고파 · AaBbCc
`wds.typography.font-weight.medium`	500	다람쥐 헌 쳇바퀴에 타고파 · AaBbCc
`wds.typography.font-weight.regular`	400	다람쥐 헌 쳇바퀴에 타고파 · AaBbCc
`wds.typography.font-weight.semibold`	600	다람쥐 헌 쳇바퀴에 타고파 · AaBbCc
`wds.typography.heading.h1`	[object Object]	다람쥐 헌 쳇바퀴에 타고파 · AaBbCc
`wds.typography.heading.h2`	[object Object]	다람쥐 헌 쳇바퀴에 타고파 · AaBbCc
`wds.typography.heading.h3`	[object Object]	다람쥐 헌 쳇바퀴에 타고파 · AaBbCc
`wds.typography.label.label1`	[object Object]	다람쥐 헌 쳇바퀴에 타고파 · AaBbCc
`wds.typography.label.label2`	[object Object]	다람쥐 헌 쳇바퀴에 타고파 · AaBbCc
`wds.typography.line-height.loose`	1.6	다람쥐 헌 쳇바퀴에 타고파 · AaBbCc
`wds.typography.line-height.normal`	1.4	다람쥐 헌 쳇바퀴에 타고파 · AaBbCc
`wds.typography.line-height.relaxed`	1.5	다람쥐 헌 쳇바퀴에 타고파 · AaBbCc
`wds.typography.line-height.snug`	1.35	다람쥐 헌 쳇바퀴에 타고파 · AaBbCc
`wds.typography.line-height.tight`	1.2	다람쥐 헌 쳇바퀴에 타고파 · AaBbCc
`wds.typography.subtitle.subtitle1`	[object Object]	다람쥐 헌 쳇바퀴에 타고파 · AaBbCc
`wds.typography.subtitle.subtitle2`	[object Object]	다람쥐 헌 쳇바퀴에 타고파 · AaBbCc
`wds.typography.subtitle.subtitle3`	[object Object]	다람쥐 헌 쳇바퀴에 타고파 · AaBbCc