Typography
Type scale based on the web standard 16px — including 13px (text-sm) optimized for CJK readability
16px Base
Web standard (1rem)
13px CJK
CJK readability optimized
Inter + Locale
EN / JA / KO
3 Weights
400, 600, 700
Font Family
Base font (Inter) + locale-specific CJK fonts
Inter
font-sansDefault (token value as-is)
Noto Sans JP
Japanese locale override
font-sansJapanese locale (CSS override)
Noto Sans KR
Korean locale override
font-sansKorean locale (CSS override)
Fira Code
font-monoCode, technical values
Type Scale
Click to copy — 11 steps from 11px to 48px
Each size includes its optimal line-height automatically.No additional configuration needed.
Font Weight
Only 3 weights — keeping visual consistency
font-normalBody text, descriptions
font-semiboldSubheadings, buttons
font-boldHeadings, emphasis
Semantic Styles
Text styles defined by purpose
These are general conventions. You can freely use any size from the Type Scale based on context.
text-3xl font-boldtext-2xl font-boldtext-xl font-semiboldtext-lg font-semiboldtext-base font-semiboldtext-md font-semibold| Tag | Preview | Sizes | Line Height | Weight | Tailwind |
|---|---|---|---|---|---|
| H1 | Heading | 30px | 40px | 700 | text-3xl font-bold |
| H2 | Heading | 24px | 34px | 700 | text-2xl font-bold |
| H3 | Heading | 20px | 30px | 600 | text-xl font-semibold |
| H4 | Heading | 18px | 28px | 600 | text-lg font-semibold |
| H5 | Heading | 16px | 26px | 600 | text-base font-semibold |
| H6 | Heading | 14px | 22px | 600 | text-md font-semibold |
Interactive Preview
text-2xlfont-normal