Typography
Senco uses the system font stack for fast rendering on all platforms — especially budget Android devices where custom web fonts add latency.
Font families
| Role | Font stack | Token | Usage |
|---|---|---|---|
| Sans (primary) | system-ui, -apple-system, "Segoe UI", sans-serif | --ds-font-sans | All UI text — headings, body, labels, buttons, amounts |
| Mono (code only) | ui-monospace, "SF Mono", "Cascadia Code", monospace | --ds-font-mono | Code blocks, tokens, developer-facing text |
| Documentation | Arial, Helvetica, sans-serif | --ds-font-doc | Emails, PDFs, external documents, help articles |
Why system fonts?
- Zero download cost — no web font requests, instant text render
- Native feel — text matches the OS, builds familiarity and trust
- Performance — critical for users on 3G / low-end devices
- Localization-ready — system fonts handle non-Latin scripts automatically
Why Arial for documentation?
- Universal availability — installed on every OS, renders in all email clients
- Consistent rendering — PDFs, print, and email look identical across devices
- Professional tone — clean, neutral, appropriate for financial documents
- Email-safe — no fallback surprises in transactional emails (receipts, confirmations)
System UI — Primary
System UI
Token:
--ds-font-sansStack: system-ui, -apple-system, "Segoe UI", sans-serifRole: All UI — headings, body, labels, buttonsABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789
!@#$%^&*()_+-=[]{}|;':",./<>?
$ € £ ¥ ₦ ₱ ₹ ₩ ₫ ₵ ₸ ₺
Regular400
The quick brown fox jumps over the lazy dogMedium500
The quick brown fox jumps over the lazy dogSemibold600
The quick brown fox jumps over the lazy dogBold700
The quick brown fox jumps over the lazy dogArial — Email & Documentation
Arial
Token:
--ds-font-docStack: Arial, Helvetica, sans-serifRole: Emails, PDFs, help articles, external documentsABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789
!@#$%^&*()_+-=[]{}|;':",./<>?
$ € £ ¥ ₦ ₱ ₹ ₩ ₫ ₵ ₸ ₺
Regular400
The quick brown fox jumps over the lazy dogBold700
The quick brown fox jumps over the lazy dogDo / Don't
Do
Ask for their info
We'll email them a secure form to fill in their payment details.
Their name
e.g. Yuki Tanaka
Clear heading hierarchy (H3, body, label) with distinct sizes and weights.
Don't
Ask for their info
We'll email them a secure form to fill in their payment details.
Their name
e.g. Yuki Tanaka
All text the same size with no hierarchy. Flat and hard to scan.
Type scale
Font: system-ui (--ds-font-sans) · Ratio: 1.200 (Minor Third) · Base: 16px · Grid: 4px line-height
Letter-spacing rule
Larger text needs tighter tracking; smaller text needs looser tracking for legibility.
| Size range | Letter-spacing | Why |
|---|---|---|
| 28px+ (Display, H1, H2) | -0.02em to -0.01em | System-ui splays at large sizes; tighten for cohesion |
| 16–23px (H3, H4, Body) | -0.01em to 0 | Neutral zone; system-ui optimized for this range |
| 11–14px (Body Sm, Caption, XS) | +0.005em to +0.02em | Counter-forms close up at small sizes; open for readability |
Line-height rule
| Size range | Line-height ratio | Why |
|---|---|---|
| 28px+ (headings) | 1.2x–1.3x | Large headings need tight leading; too much air disconnects |
| 16–18px (body) | 1.5x | WCAG 1.4.12 minimum for sustained reading |
| 11–14px (small) | 1.5x | Small text needs generous leading, especially on low-DPI |
Headings
| Level | Size | Weight | Line height | Letter spacing | Usage |
|---|---|---|---|---|---|
| Display | 2.5rem (40px) | 700 | 1.2 (48px) | -0.02em | Account balance, hero numbers |
| H1 | clamp(1.75rem, 1.25rem + 1.5vw, 2.063rem) | 700 | 1.21 (40px) | -0.02em | Page titles |
| H2 | 1.75rem (28px) | 700 | 1.29 (36px) | -0.015em | Section headings |
| H3 | 1.438rem (23px) | 700 | 1.22 (28px) | -0.01em | Card titles, subsections |
| H4 | 1.188rem (19px) | 600 | 1.26 (24px) | -0.005em | Minor headings, labels |
H2 and H3 use weight 700 (not 600) to qualify as WCAG "large text" (bold ≥ 18pt). H4 at 19px/600 does not qualify — always enforce 4.5:1 contrast for H4.
Body
| Level | Size | Weight | Line height | Letter spacing | Usage |
|---|---|---|---|---|---|
| body-lg | 1.125rem (18px) | 400 | 1.56 (28px) | 0 | Emphasized body, lead text |
| body | 1rem (16px) | 400 | 1.5 (24px) | 0 | Default reading text |
| body-sm | 0.875rem (14px) | 400 | 1.5 (21px) | 0.005em | Secondary info, metadata |
| caption | 0.75rem (12px) | 500 | 1.5 (18px) | 0.01em | Timestamps, helper text |
| xs | 0.688rem (11px) | 500 | 1.5 (16.5px) | 0.02em | Badges, legal micro-text (non-essential only) |
Weight scale
| Weight | Token | Usage |
|---|---|---|
| 300 (Light) | font-weight-light | Large display numbers only (40px+). Avoid on body text and low-DPI screens. |
| 400 (Regular) | font-weight-regular | Body text, descriptions, secondary content |
| 500 (Medium) | font-weight-medium | XS text reinforcement, labels, navigation |
| 600 (SemiBold) | font-weight-semibold | H2–H4 headings, card titles, form labels |
| 700 (Bold) | font-weight-bold | Display, H1, account balances, primary emphasis |
Responsive scaling
Headings scale up on desktop (768px+). Body text stays fixed.
| Level | Mobile | Desktop |
|---|---|---|
| Display | 40px | 57px |
| H1 | 33px | 40px |
| H2 | 28px | 33px |
| H3 | 23px | 28px |
| H4 | 19px | 23px |
| Body and below | same | same |
Heading scale
Display
The quick brown fox jumps over the lazy dog
2.5rem / 700 / 1.2H1
The quick brown fox jumps over the lazy dog
clamp(1.75rem, 1.25rem + 1.5vw, 2.063rem) / 700 / 1.21H2
The quick brown fox jumps over the lazy dog
1.75rem / 700 / 1.29H3
The quick brown fox jumps over the lazy dog
1.438rem / 700 / 1.22H4
The quick brown fox jumps over the lazy dog
1.188rem / 600 / 1.26Body scale
body-lg
The quick brown fox jumps over the lazy dog
1.125rem / 400 / 1.56body
The quick brown fox jumps over the lazy dog
1rem / 400 / 1.5body-sm
The quick brown fox jumps over the lazy dog
0.875rem / 400 / 1.5caption
The quick brown fox jumps over the lazy dog
0.75rem / 500 / 1.5xs
The quick brown fox jumps over the lazy dog
0.688rem / 500 / 1.5Currency & numbers
Senco handles money — number rendering must be clear and consistent.
- Use
font-variant-numeric: tabular-numsfor aligned columns in transaction lists, exchange rates, and amount displays - Use the system sans-serif font (not monospace) for all financial data
- Account balances use Display size (40px) at weight 700
Currency & number rendering
Tabular numerals keep columns aligned in transaction lists and amount displays.
Amount (large)$1,250.00
Amount (body)₩345,000 KRW
Rate1 USD = 1,380 KRW
Fee$2.50 transfer fee
Tabular nums250.00 → 345,000
Documentation typography
For emails, PDFs, and external documents, use Arial to ensure consistent rendering across all clients and devices.
| Level | Size | Weight | Usage |
|---|---|---|---|
| Doc heading | 24px | Bold (700) | Email subject, document title |
| Doc subheading | 18px | Semibold (600) | Section headers |
| Doc body | 14px | Regular (400) | Email body, document text |
| Doc caption | 12px | Regular (400) | Footer, legal, disclaimers |
Email example — Arial in context
Accessibility
- Heading hierarchy must be sequential — no skipping levels (h1 → h2 → h3)
- Body text line height minimum 1.5 for readability
- Minimum readable text size: 11px (xs) — with weight 500 and positive letter-spacing
- Text spacing must be adjustable without loss of content (WCAG 1.4.12)
- Support assistive technology navigation via semantic heading structure
- Contrast ratios: 4.5:1 minimum for normal text, 3:1 for large text (18px+ bold or 24px+)
- Avoid font-weight 300 on screens below 150 DPI — use 400 with a lighter color instead