Whale uses two type families and one compact size scale tuned for dense
financial interfaces. The base reading size is 13px and does not go smaller.
| Family | Stack | Used for |
|---|---|---|
| UI (sans) | Inter Variable, then platform CJK fallback (PingFang SC, Microsoft YaHei, …) |
All interface and body text |
| Mono | Google Sans Code, then ui-monospace, SF Mono, Menlo, … |
Identifiers, amounts, dates, and code-like values |
- Inter Variable is self-hosted with a platform CJK fallback so Latin and CJK render consistently across surfaces.
- Use the mono family for values users compare or copy: IDs, account numbers, currency amounts, timestamps, and code.
Base is 13px. Avoid intermediate sizes (12/14) and never go below the base for
body or control text.
| Size | Weight | Typical role |
|---|---|---|
| 30 | 700 | Largest display figure |
| 28 | 700 | Page title / primary metric |
| 22 | 700 | Section heading |
| 18 | 700 | Card, dialog, and drawer title |
| 15 | 600–700 | Group title |
| 13 | 500 | Body, control, navigation, tab — the base |
| 11 | 500–600 | Label, metadata, table header, timestamp |
| 10 | 500 | Smallest metadata, used sparingly |
- Reserve the heaviest weights and largest sizes for one dominant element per view; do not render several regions at the same scale and weight.
- Table headers are compact and quieter than the primary cell value (
11px, 600); body cells are13px.
- Enable tabular numerals for financial figures so digits align down a column.
- Right-align amounts and counts when users compare magnitude vertically.
- Render identifiers, amounts, dates, and other code-like values in the mono family with their stored casing preserved.