Text Styles
:::tip Core Principle The typography system is designed for multilingual support, using 4 font families to cover Latin, Simplified Chinese, Traditional Chinese, and Japanese. All font sizes are managed through a unified Type Scale Token. :::
Font Families
The system supports 4 fonts with automatic language-based fallback:
| Font | Language | Usage |
|---|---|---|
| Inter | Latin (English) | Primary UI font, numbers, English labels |
| PingFang SC | Simplified Chinese | Mainland China user interfaces |
| PingFang TC | Traditional Chinese | Hong Kong and Taiwan user interfaces |
| Noto Sans JP | Japanese | Japan user interfaces |
CSS font-family Declaration
font-family: 'Inter', 'PingFang SC', 'PingFang TC', 'Noto Sans JP', sans-serif;
The corresponding font takes priority based on the content language. Inter is the preferred font for numbers and English text, ensuring precise alignment in data display.
Font Weights
| Weight | Value | Usage |
|---|---|---|
| Regular | 400 | Body text, descriptions, forms |
| Medium | 500 | Emphasized text, navigation labels (non-Inter fonts) |
| Semibold | 600 | Headings, buttons, key actions (Inter uses Semibold for Emphasized) |
Note: In DS 4.0, Light (300) has been removed. The Emphasized semantic weight maps to Semibold for Inter (Latin) and Medium for other fonts. Weight support varies across font families. Refer to the Weight Availability Matrix below.
UI Type Scale
Heading Levels
| Level | Size | Line Height | Weight | Usage |
|---|---|---|---|---|
| Display | 32px | 44px | Semibold | Page-level large heading |
| H1 | 24px | 32px | Semibold | Page title |
| H2 | 20px | 28px | Semibold | Module / section heading |
| H3 | 18px | 24px | Semibold | Sub-module heading |
Body & Supporting Text
| Level | Size | Line Height | Weight | Usage |
|---|---|---|---|---|
| Body | 14px | 20px | Regular | Paragraph text, lists, form inputs |
| Footnote | 13px | 18px | Regular | Supporting notes, disclaimers |
Details Page Reference
The details page is the highest-information-density context. Typography rules for this layout:
| Level | Size | Line Height | Top Spacing | Weight |
|---|---|---|---|---|
| H1 | 28px | 36px | 32px (0 for first block) | Semibold |
| H2 | 24px | 32px | 24px | Semibold |
| H3 | 20px | 28px | 20px | Semibold |
| H4 | 18px | 24px | 16px | Semibold |
| Paragraph | 16px | 24px | — (12px bottom spacing) | Regular |
| Paragraph Bold | 16px | 24px | same as above | Semibold |
| Paragraph Italic / Italic Bold | 16px | 24px | same as above | Regular / Semibold |
Block spacing = previous block's padding-bottom (H1/H2: 12px, H3/H4: 8px, Paragraph: 12px) + current block's margin-top, consistent with block-editor implementation.
Weight Availability Matrix
Weight availability across font families:
| Font | Regular (400) | Medium (500) | Semibold (600) |
|---|---|---|---|
| Inter | ✅ | ✅ | ✅ |
| PingFang SC | ✅ | ✅ | ✅ |
| PingFang TC | ✅ | ✅ | ✅ |
| Noto Sans JP | ✅ | ✅ | ✅ |
Accessibility
Minimum Font Size
All UI text must be no smaller than 13px (Footnote level), ensuring readability across all devices.
Recommended Line Height Ratio
- Body text: ≥ 1.5× font size
- Headings: ≥ 1.25× font size
Minimum Weight
Regular (400) is the lightest permitted weight in DS 4.0. Light (300) has been removed from the design system.
Usage
Tailwind Class
// Heading
<h1 className="text-[24px] leading-[32px] font-semibold">Page Title</h1>
// Body text
<p className="text-[14px] leading-[20px] font-normal">Body content</p>
// Supporting text
<span className="text-[13px] leading-[18px] text-[var(--Labels-Secondary)]">Supporting note</span>
Typography in Components
// Button uses Body level + Medium
<Button>Action</Button> // 14px / Medium
// Input uses Body level + Regular
<Input placeholder="Enter text" /> // 14px / Regular