Typography
Three typefaces, one job each. Bricolage Grotesque for display — it has personality. Onest for body — it disappears and lets content breathe. JetBrains Mono for amounts and metadata — it aligns numbers and signals precision. Sentence case everywhere. No exceptions.
Import
All three families are served from Google Fonts. A single import handles all weights and optical sizes. Add it in <head> before any CSS, with preconnect hints so the font negotiation starts immediately.
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,500;12..96,600;12..96,700&family=Onest:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
Type families
--font-displayabcdefghijklmnopqrstuvwxyz 0123456789
--font-bodyabcdefghijklmnopqrstuvwxyz 0123456789
--font-monoabcdefghijklmnopqrstuvwxyz 0123456789
Type scale
Nine levels from display-xl to mono-sm. The display levels use optical sizing and negative tracking — they get tighter as they grow, which is how type looks intentional at large sizes. Body levels track at 0 — don't add letter-spacing to body copy.
Token reference
| Token | Family | Size | Weight | Line height | Tracking |
|---|---|---|---|---|---|
display-xl | Bricolage | clamp(48px–88px) | 600 | 0.95 | −0.035em |
display-lg | Bricolage | clamp(36px–64px) | 600 | 0.95 | −0.03em |
display-md | Bricolage | clamp(24px–36px) | 600 | 1.05 | −0.025em |
display-sm | Bricolage | 20px | 600 | 1.15 | −0.02em |
body-lg | Onest | 17px | 400 | 1.5 | 0 |
body-md | Onest | 15px | 400 | 1.5 | 0 |
body-sm | Onest | 13px | 400 | 1.45 | 0 |
mono-md | JetBrains Mono | 12px | 500 | 1.4 | +0.08em |
mono-sm | JetBrains Mono | 10px | 500 | 1.4 | +0.1em |
Responsive behavior
The three display levels use CSS clamp() to scale fluidly between breakpoints. The minimum is safe on a 375px phone, the maximum is comfortable on a 1440px desktop. The fluid range is 5–7vw, which lets the type feel native to the viewport width without breakpoint jumps.
Body and mono levels are fixed — they don't scale. At 15px and below, clamp-based scaling would make text too small to read comfortably on mobile without triggering iOS text size bumps.
| Level | Mobile (375px) | Fluid range | Desktop (1440px) |
|---|---|---|---|
display-xl | 48px | 7vw | 88px |
display-lg | 36px | 5vw | 64px |
display-md | 24px | 3vw | 36px |
display-sm | Fixed at 20px | ||
| Body & mono | Fixed — no scaling | ||
Amount formatting
Rupee amounts are the most important numbers in Settld. They get special treatment: JetBrains Mono with font-variant-numeric: tabular-nums so columns align in ledgers, a non-breaking ₹ prefix so it never orphans onto the next line, and commas at the Indian grouping standard (lakhs, crores — not the Western millions format).
/* Amount formatting rules */ font-family: var(--font-mono); font-variant-numeric: tabular-nums; /* columns align */ font-feature-settings: "tnum"; /* tabular nums fallback */ /* Direction color */ /* owed to you → --teal, you owe → --coral, neutral → --ink */ /* Indian grouping: use Intl.NumberFormat */ // new Intl.NumberFormat('en-IN', { maximumFractionDigits: 0 }).format(24500) // → "24,500" (not "24.5K" — never abbreviate amounts in Settld)
Formatting rules
Sentence case everywhere. Headlines, button labels, nav items, section titles — all sentence case. "Add expense" not "Add Expense." This is non-negotiable. The only exception is proper nouns (UPI, GPay, Swiggy, PhonePe, Settld itself).
No tracking on body copy. Letter-spacing on 15–17px body text makes it look like a logo, not content. The 0 tracking on body-lg/md/sm is correct — leave it.
Negative tracking on display. Display type at large sizes needs tight tracking to look intentional. Bricolage Grotesque at 88px with default tracking looks loose. The −0.035em closing holds everything together.
Mono for numbers, always. Amounts, counts, percentages, dates, and codes use --font-mono. Never render financial numbers in Onest — they're not tabular and they'll drift in ledgers.