Typography
웹 표준 16px 기반 타입 스케일, CJK 가독성에 최적화된 13px(text-sm) 포함
16
16px Base
웹 표준 (1rem)
13
13px CJK
CJK 가독성 최적화
Aa
Inter + Locale
EN / JA / KO
A
A
A
3 Weights
400, 600, 700
Font Family
기본 폰트(Inter) + 로케일별 CJK 폰트 구성
Inter
font-sansABCDEFG abcdefg 0123456789
기본값(토큰 값 그대로)
Noto Sans JP
Japanese locale override
font-sansあいうえお 漢字 カタカナ
일본어 로케일(CSS 오버라이드)
Noto Sans KR
Korean locale override
font-sans가나다라 한글 디자인
한국어 로케일(CSS 오버라이드)
Fira Code
font-monoconst x = 42; => {}
코드, 기술적 값
Type Scale
클릭하면 복사됩니다 (11px~48px, 11단계)
각 사이즈에 최적화된 행높이(line-height)가 자동으로 포함됩니다.별도 설정이 필요하지 않습니다.
Font Weight
3가지 기본 굵기만 사용해 일관성 유지
Aa
400
Regular
font-normal본문, 설명
Aa
600
Semibold
font-semibold서브 제목, 버튼
Aa
700
Bold
font-bold제목, 강조
Semantic Styles
용도별로 정의된 텍스트 스타일
일반적인 가이드라인입니다. 컨텍스트에 따라 Type Scale의 어떤 사이즈든 자유롭게 사용할 수 있습니다.
H1
text-3xl font-boldSize
30px
행높이
40px
Weight
700
H2
text-2xl font-boldSize
24px
행높이
34px
Weight
700
H3
text-xl font-semiboldSize
20px
행높이
30px
Weight
600
H4
text-lg font-semiboldSize
18px
행높이
28px
Weight
600
H5
text-base font-semiboldSize
16px
행높이
26px
Weight
600
H6
text-md font-semiboldSize
14px
행높이
22px
Weight
600
| 태그 | 미리보기 | Sizes | 행높이 | 굵기 | Tailwind |
|---|---|---|---|---|---|
| H1 | 제목 | 30px | 40px | 700 | text-3xl font-bold |
| H2 | 제목 | 24px | 34px | 700 | text-2xl font-bold |
| H3 | 제목 | 20px | 30px | 600 | text-xl font-semibold |
| H4 | 제목 | 18px | 28px | 600 | text-lg font-semibold |
| H5 | 제목 | 16px | 26px | 600 | text-base font-semibold |
| H6 | 제목 | 14px | 22px | 600 | text-md font-semibold |
Interactive Preview
디자인 시스템
text-2xlfont-normal