Archivo Black for muscle. Space Grotesk for body. JetBrains Mono for the soul. We have tried other stacks. We keep coming back to these three. This is a love letter, but it is also a practical argument for why this combination works when so many others fall apart under production pressure.
Typography decisions are some of the most load-bearing choices in a UI. They affect readability, hierarchy, brand perception, performance, and the way a product feels to use at 2am when you're tired and trying to find a number. We don't treat font selection as an aesthetic preference — we treat it as an infrastructure decision.
The three fonts below are not the only fonts we use. But they are the ones we return to when a project needs to be clear, fast, and unmistakably intentional. If you are starting a new project and don't know where to begin on type, start here.
How we evaluate any typeface before it ships
- Legibility at 14px regular weight on a mid-range Android screen. Not a retina display. The average screen.
- Distinguishable letterforms at small sizes — specifically: 0 vs O, 1 vs l vs I, rn vs m. Failure here means form labels and codes become unreadable.
- Available on Google Fonts or self-hostable. No licensing surprises six months into production.
- Multiple weights that actually look different from each other. Some typefaces have six weights that are functionally indistinguishable below 24px.
- Works in all caps, title case, and sentence case. Some fonts were designed for one and fight the others.
The three fonts
Loud Ideas.
Archivo Black is the reason our headings stop people mid-scroll. It is aggressive at large sizes — compressed letterforms, no optical lightness tricks, pure weight on the page. It was designed for poster and billboard work, which means it was engineered to land hard at distance. That quality translates perfectly to a screen hero section or an oversized callout. The only weight is 900, which removes the temptation to use it at body sizes where it would be unreadable. It only has one job: make the heading hit.
Built to last.
Space Grotesk has something that most grotesks don't: quirk. Slightly quirky letterforms — the angled terminals, the distinctive lowercase 'a' — that prevent it from disappearing into the background the way Helvetica or Inter can. It reads cleanly at 16px in a paragraph but still feels considered when you see it at 13px in a navigation label. The four available weights give enough range to build a complete UI without needing a second typeface for emphasis. We use 400 for body, 500 for UI labels, 600 for navigation, and 700 for sub-headings and callouts.
01 / detail.
JetBrains Mono is primarily a code editor typeface, designed by JetBrains to be read in a terminal for eight hours straight. That pedigree makes it extraordinary for UI meta text — the small, functional copy that a product generates constantly: timestamps, tags, status labels, form field hints, invoice numbers. It reads cleanly at 10px in a way that no proportional typeface ever does, and its letter disambiguation (0 vs O, 1 vs l vs I) is the best of any font we have tested. We use it wherever precision reading matters more than warmth.
A typeface isn't a personality. It's a structure. The personality comes from what you say inside it.
How the three work together
The combination works because each font occupies a completely distinct role, visually and functionally. There is no overlap and no competition. Your eye learns the grammar of the page immediately: Archivo Black means stop and read this, Space Grotesk means here is the detail, JetBrains Mono means this is a number or a label.
Pairing logic: when we reach for each font
Caveat — the handwritten font used for pull quotes and image captions — is a fourth typeface that enters the stack for specific emotional moments. It is not part of the core three because it has no functional role. Its only job is to add a human signal at the moments where warmth matters more than information.
What we avoid
More than four typefaces in one project
Every font added beyond the core stack is a font that has to earn its place. Usually it doesn't. Usually it just creates visual noise that a tired designer added in week three because they were bored with the system.
Using a display font at body size
Archivo Black below 18px. Caveat in a navigation menu. These are display instruments used at a scale they were not designed for. The result is always either unreadable or just uncomfortable to read for more than a sentence.
Too many weights of the same typeface
Space Grotesk at 400, 450, 500, 550, 600, 700 in the same UI. The eye cannot distinguish those intermediate weights reliably. Choose three and make them count: regular, medium, bold.
Fonts that require a license check in production
We have been burned by this. A beautiful font in a client's brand guidelines that turns out to be licensed for print only, or requires a separate web license that doubles the annual cost. Google Fonts or self-host. Every time.
We don't pick fonts to be interesting. We pick them to be invisible — to carry meaning without calling attention to themselves.
The three-font stack is not a constraint we impose reluctantly. It is the conclusion we arrived at after trying stacks with five, six, and seven typefaces and noticing that the extra fonts never did what we hoped. The best typography systems are the ones you stop noticing — because when you stop noticing the fonts, you start reading the content. That's the whole point.