The four families
One job each · no substitutesEvery property loads the same four, from Google Fonts, in the same roles. A property never swaps a family. The variety comes from color and content, never from a different typeface.
Fraunces
Headlines, wordmarks, anything that performs. A characterful old-style serif with optical sizing and a SOFT axis we run warm.
- Axes
- opsz 9–144 · wght · SOFT 0–100
- Token
- --display
Source Serif 4
Paragraphs and long-form reading. The quiet workhorse under every headline.
- Axes
- opsz 8–60 · wght
- Token
- --body
Inter
Interface only. Where a serif would be too warm or too tall, Inter keeps controls clean and legible.
- Weights
- 400 · 500 · 600 · 700
- Token
- --sans
JetBrains Mono
Everything stamped: kickers, timestamps, hex codes, labels, machine paths. The system's mechanical voice.
- Weights
- 400 · 500 · 600
- Token
- --mono
The type scale
Seven roles, fixedSeven named roles cover every surface. Build with the role, not a raw pixel size, so headings and labels stay consistent from page to page.
The families in concert
How they stack on a real pageA mono kicker over a Fraunces headline, a Fraunces dek, Source Serif body. Four families, each in its lane, reading as one voice.
Four voices, one accent.
The display serif performs, the body serif reads, the sans runs the controls, and the mono stamps the metadata.
When a kicker in JetBrains Mono sits over a Fraunces headline, with Source Serif 4 carrying the paragraph and Inter on the button, a reader cannot name the typefaces but feels the consistency. That is the job. The family is recognizable because the roles never move, not because the page is loud.
Do & don't
Keep the voice consistent- Use Fraunces for anything that performs: headlines, wordmarks, big numbers.
- Use Source Serif 4 for real reading. It is the body voice.
- Keep Inter for interface only: buttons, labels, forms, nav.
- Stamp metadata in JetBrains Mono: kickers, hex, timestamps, paths.
- Build with the seven named roles, not raw pixel sizes.
- Don't swap a family per property. The four never change.
- Don't set body copy in Fraunces or headlines in Inter.
- Don't add a fifth family. The system is four, full stop.
- Don't use mono for paragraphs, or a serif for a dense UI control.
- Don't fake emphasis with all-caps body. Use weight and role.