Typography
Typography
Section titled “Typography”Our type system ensures clarity and hierarchy. We use Hanken Grotesk for headings, Inter for body, and JetBrains Mono for code and data — following patterns from Stripe, Linear, and Vercel.
Font Families
Section titled “Font Families”| Role | Font | Classification | Best for |
|---|---|---|---|
| Display / Headings | Hanken Grotesk | Geometric grotesk | H1–H4, hero text |
| Body / UI | Inter | Neo-grotesk | Paragraphs, labels |
| Code / Data | JetBrains Mono | Monospace | Code blocks, tokens |
Type Scale
Section titled “Type Scale”Font sizes
| Level | Size | Weight | Line Height |
|---|---|---|---|
| Display / Hero | 48–72px | Bold 700 | 1.1 |
| H1 | 36–48px | Bold 700 | 1.2 |
| H2 | 24–30px | Semibold 600 | 1.3 |
| H3 | 18–24px | Semibold 600 | 1.4 |
| Body | 16px | Regular 400 | 1.5 |
| Body Small | 14px | Regular 400 | 1.5 |
| Caption | 12px | Medium 500 | 1.4 |
| Code | 14px | Regular 400 | 1.6 |
Font Weights
Section titled “Font Weights”Weight scale
| Weight | Value | Usage |
|---|---|---|
| Regular | 400 | Body text |
| Medium | 500 | Emphasis, links |
| Semibold | 600 | Subheadings, card titles |
| Bold | 700 | Headings, hero text |
Line Heights
Section titled “Line Heights”Line heights
| Context | Value | Notes |
|---|---|---|
| Display | 1.1 | Hero, large headings |
| Heading | 1.25 | H1–H3 |
| Body | 1.5 | Optimal at 16px |
| Code | 1.6 | Monospace readability |
How the best systems handle type
Section titled “How the best systems handle type”Linear — Built on Inter
Section titled “Linear — Built on Inter”Linear uses Inter as its sole typeface, with hierarchy through weight and size alone. Inter’s tall x-height and distinct letterforms make it ideal for UI.
Stripe — Heading/Body pairing
Section titled “Stripe — Heading/Body pairing”Stripe pairs a distinctive heading font with readable body font. We follow this with Hanken Grotesk + Inter.
Apple HIG — Semantic type styles
Section titled “Apple HIG — Semantic type styles”Apple names styles by purpose (“Title 1”, “Body”, “Caption”) not raw size — making the system self-documenting.
Helsinki DS — Multilingual ready
Section titled “Helsinki DS — Multilingual ready”Helsinki supports Finnish, Swedish, English with generous line heights (1.5 body, 1.6 small) for cross-alphabet readability.
Best Practices
Section titled “Best Practices”- Headings: Hanken Grotesk, sentence case,
letter-spacing: -0.02em - Body: Inter, 16px minimum, 1.5 line height, 60–80 chars per line
- Code/Data: JetBrains Mono, 14px, 1.6 line height
- One H1 per page, nested headings in order