Typography
Two families.
One voice.
Urbanist sets the tone in display. Manrope carries the reading load. Nothing else is loaded.
Display
500
Urbanist
Ship something worth keeping.
Page titles, section headers, display copy
default: Urbanist 500
fallback: -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, sans-serif
Body
400 · 500
Manrope
The quick brown fox jumps over the lazy dog. Built with patience.
Body copy, UI, everywhere else
default: Manrope 400
fallback: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif
Scale
Headline
The quick brown fox
48–144pxclamp(3rem, 10vw, 9rem) / 0.95
Display
The quick brown fox
56px3.5rem / 1.05
H1
The quick brown fox
36px2.25rem / 1.1
H2
The quick brown fox
28px1.75rem / 1.2
H3
The quick brown fox
20px1.25rem / 1.35
Body L
The quick brown fox
17px1.0625rem / 1.55
Body
The quick brown fox
15px0.9375rem / 1.55
Caption
The quick brown fox
13px0.8125rem / 1.45
In context
Sample
We believe the most durable things are made slowly, from good materials, by people who care what happens after the handoff.
That belief shows up everywhere — from how we write a product description to the way a button animates under a cursor. This page is a record of the small decisions that, taken together, form the brand.