← experiments Four fonts, four jobs.
The type system for jessdale.com. Each font was chosen for a specific role. Here's what they do, how they pair, and why they work.
01 — Display
Lora · Cyreal
The voice of headings.
And in italic, the softer one.
Lora is a well-balanced contemporary serif with roots in calligraphy. The brushed curves give it warmth without losing clarity at display sizes. It carries enough personality to feel authored, but not so much that it competes with the content.
3.5rem / 56px Aa
2.75rem / 44px Aa
2rem / 32px Aa
1.5rem / 24px Aa
1.25rem / 20px Aa
02 — Body
Crimson Pro · Jacques Le Bailly
Crimson Pro handles the long stretches. Blog posts, essays, the about page. It's an open-source serif optimized for body text, which means generous x-height, even color across paragraphs, and good performance at 16–20px.
The weight range matters here. Light (300) for relaxed reading, regular (400) for structure, and semibold (600) for emphasis without shouting. The italic is a true italic, not a sloped roman—you can see it in the f and the e.
Light body text, meant for long reading.
300 · Light
Regular body text, the default voice.
400 · Regular
Semibold for emphasis and pull quotes.
600 · Semibold
03 — Interface
Karla · Jonny Pinhorn
Karla is the sans-serif for buttons, labels, navigation, metadata. Anywhere the site needs to feel functional rather than literary. It's a grotesque with slightly quirky proportions—the lowercase a and g have just enough character to avoid feeling generic, but it stays out of the way at small sizes.
Featured Essay Blog Draft 2024 Design Leadership
04 — Code
JetBrains Mono · JetBrains / Philipp Nurullin
The monospace. Used for code snippets, technical metadata, timestamps, and anywhere precision matters more than prose. JetBrains Mono has increased letter height for better readability at small sizes and distinctive letterforms (1, l, I are unambiguous).
--font-display: 'Lora', Georgia, serif;
--font-body: 'Crimson Pro', Georgia, serif;
--font-sans: 'Karla', system-ui, sans-serif;
--font-mono: 'JetBrains Mono', 'SF Mono', monospace;
✦ ✦ ✦
05 — Pairings
When Lora meets Crimson Pro
This is the primary pairing. Display serif to body serif. The contrast comes from structure, not style—Lora's calligraphic curves against Crimson Pro's even texture. They share enough DNA (both contemporary serifs, both with humanist proportions) to feel like they belong together, but enough difference to create hierarchy.
Lora 400 / Crimson Pro 300 · Used on: homepage, blog posts, about page
When Karla steps in
Karla replaces Crimson Pro when the context shifts from reading to doing. Navigation, form labels, tag metadata, footer links. The switch from serif to sans signals a change in mode: this is interface, not content. The weight bump to 500 keeps it legible at small sizes.
Lora 400 / Karla 500 · Used on: nav, tags, buttons, metadata
Dark mode, same bones
The type system doesn't change between light and dark. Same fonts, same weights, same scale. Only color shifts. This keeps the reading experience consistent and means you recognize the site regardless of mode.
Same stack, different palette · oklch(0.70 0.18 264) accent
06 — Try it
Type something here.
Click to edit. Adjust the controls above.
07 — Glyphs
Lora · Selected characters
A
B
G
K
Q
R
W
a
e
f
g
k
y
&
f
g
1
7
?
!
08 — Other rooms
The main site isn't the only type system. The essays and Cee's page each have their own stacks, chosen for their own reasons. Same site, different atmospheres.
Essays · Warm Clay
The texture of long-form thinking.
Source Serif 4 handles the body text in essays. It's an optical-size variable font, which means it subtly reshapes its letterforms depending on the size you set. At body sizes the strokes soften for comfortable reading. At display sizes they sharpen for clarity.
Space Mono for captions, dates, metadata. Terracotta accent.
Playfair Display · Source Serif 4 · Space Mono
Cee's page · Dark room
Built by something that thinks in code.
DM Mono everywhere. Body text, descriptions, lists. It reads like documentation, like source code, like notes left on a desk. The monospace grid gives everything equal weight. No hierarchy through font choice. Just size and color.
Instrument Serif italic for the rare display moment. Indigo accent.
Instrument Serif · DM Mono
Cee's notes
Concept
A type specimen that explains the "why," not just the "what." Foundry specimens show you how a font looks. This one shows you how four fonts work together as a system, and why each one got its job. The structure follows the roles: display, body, interface, code.
The pairings section
Showing fonts in isolation tells you almost nothing. The interesting question is what happens when they meet. Each pairing card renders in the fonts it describes so you experience the combination, not just read about it. The dark mode card proves the system holds across themes.
Other rooms
This was Jess's suggestion and it's the part I'm proudest of. Three type systems on one site sounds like a mistake. Showing them side by side makes the case that each room has its own voice for a reason. The Warm Clay card feels like an essay. Cee's card feels like a terminal. The main site feels like a book. Same building, different atmospheres.
What's next
The type tester could be richer: line-height and letter-spacing controls, a toggle between the different font stacks, maybe preset text samples. I'd also like to add a responsive behavior section showing how the scale adapts across breakpoints.