Typography
B2B back-office involves a lot of "reading" time. Typography directly impacts comprehension speed and error prevention.
Font Family
System Font Stack
Acua prioritizes system fonts for optimal rendering on each user's environment.
| Usage | Font Stack |
|---|---|
| UI Text | system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif |
| Thai | "Noto Sans Thai", "Sarabun", system-ui, sans-serif |
| Monospace | ui-monospace, "SF Mono", "Menlo", "Consolas", "Liberation Mono", monospace |
Why System Fonts?
| Benefit | Description |
|---|---|
| Performance | No font file downloads required |
| Native feel | Uses OS default fonts for familiarity |
| Multilingual | System fonts cover multiple languages |
| Readability | Optimized rendering on each OS |
Type Scale
Acua uses a type scale based on multiples of 4.
| Token | Size | Line-height | Usage |
|---|---|---|---|
| text-2xs | 10px | 1.4 | Tiny annotations (discouraged) |
| text-xs | 12px | 1.5 | Captions, badges |
| text-sm | 14px | 1.5 | Body, form labels, table cells |
| text-base | 16px | 1.5 | Emphasized text, input fields |
| text-lg | 18px | 1.4 | Subheadings |
| text-xl | 20px | 1.4 | Page titles |
| text-2xl | 24px | 1.3 | Section headings |
| text-3xl | 30px | 1.25 | Large headings |
| text-4xl | 36px | 1.2 | Hero headings (rare) |
Font Weight
| Token | Value | Usage |
|---|---|---|
| font-normal | 400 | Body text, descriptions, input values |
| font-medium | 500 | Labels, light emphasis, form labels, table headers |
| font-semibold | 600 | Headings, buttons, page titles |
| font-bold | 700 | Strong emphasis, amounts, warning headings |
Usage Guidelines
Do:
- font-normal: Body, descriptions, input values
- font-medium: Form labels, table headers, light emphasis
- font-semibold: Page titles, buttons, headings
- font-bold: Amount display, important warnings
Don't:
- Don't use font-light (300) - reduces readability
- Don't use font-black (900) - appears aggressive
- Don't overuse bold - emphasis loses meaning
- Don't mix multiple weights in the same sentence
Visual Hierarchy
3-Tier Structure
| Tier | Role | Style | Example |
|---|---|---|---|
| Level 1: Heading | What (entry point) | text-xl font-semibold text-foreground | "Invoice Detail" |
| Level 2: Body | How (instructions) | text-sm font-normal text-foreground | "Review the info below" |
| Level 3: Annotation | Exceptions, notes | text-xs font-normal text-muted-foreground | "*Cannot be undone" |
Heading Level Usage
| HTML Element | Style | Usage |
|---|---|---|
| <h1> | text-2xl font-semibold | Page title (one per page) |
| <h2> | text-xl font-semibold | Section heading |
| <h3> | text-lg font-semibold | Subsection heading |
| <h4> | text-base font-medium | Card title, minor heading |
| <h5> | text-sm font-medium | Group label |
| <h6> | text-xs font-medium | Smallest heading (rare) |
Number Typography
Number readability is critical for financial applications.
| Type | Font | Alignment | Separator | Example |
|---|---|---|---|---|
| Amount | font-mono or tabular-nums | Right | Comma | ¥1,234,567 |
| ID | font-mono | Left | None | INV-2024-001 |
| Date | Proportional | Left | None | 2024/01/15 |
| Percent | tabular-nums | Right | None | 12.34% |
| Count | Proportional | Right | Comma | 1,234 items |
tabular-nums Importance
tabular-nums unifies digit widths for proper column alignment in tables.
Without tabular-nums: With tabular-nums:
¥1,234,567 ¥1,234,567
¥99,999 ¥ 99,999
¥100,000 ¥ 100,000