Six Fraunces display voices and a disciplined Geist body scale. Each voice carries its own SOFT / WONK / opsz tuning — pick the right one deliberately, the way you'd pick a gear.
Single source of truth: :root in src/app/globals.css
font-display-hero. Never more than one per page.font-display-kicker — always with the uppercase + tracking treatment.font-display— the serif's neutral gear.font-display-quote (WONK 0.9) — or font-display-quote-hero for rare oversized pull-quotes.font-sans — the serif is a display voice, not a paragraph voice.The default serif — everyday headings, card titles, prices, the wordmark.
.font-displayUse for
Most headings on the site: section titles, card titles, prices, logo wordmarks, buttons, badges, any headline that is not a hero or a kicker.
Avoid
Long body paragraphs (that is Geist’s job) and page-level heroes (use .font-display-hero for those).
Everywhere — ~216 usages across 55 files. It is the serif’s neutral gear.
Uppercase section labels — the small caption above a section headline.
.font-display .font-display-kickerUse for
Section kickers on white and dark surfaces: "Hand-picked", "Categories", "Your Adventure". Always paired with text-sm/text-xs uppercase + a dot or icon.
Avoid
Body copy, sentences with lowercase, or anything that needs to be read in volume — it is a label voice, not a reading voice.
11 usages in 11 files: home sections, experiences, itineraries, trip-planner, testimonial, contact, about.
The big voice — one headline per page, set large with a composed tight rhythm.
.font-display .font-display-heroUse for
Exactly one page-level headline per page (hero H1s, auth headers, itinerary names). Large sizes only — text-4xl and up reads best.
Avoid
Multiple heroes on one page, small text (below text-3xl the high opsz forms look heavy), and body copy.
9 usages in 9 files: homepage hero, category hero, experience hero, login/register, itineraries, trip-planner, itinerary detail/share.
The true Fraunces italic — soft, warm, set aside for hand-set editorial accents.
.font-display-italicSitting here, watching the light cross the Accursed Mountains…
Use for
Subtle editorial italics: captions, sign-offs, asides. Softer and gentler than the quote voice — this is the whisper, not the shout.
Avoid
Long passages (it is still a serif italic — legibility fades in volume) and anywhere the quote or quote-hero voice is the better fit.
Currently reserved — defined in globals.css but not yet used in any component. Claim it for the right editorial accent.
The hand-drawn pull-quote — testimonial quotes and story excerpts.
.font-display-quote“The mountains don't give themselves away easily — you have to earn them.”
Use for
Short quoted lines: testimonial quotes, story excerpt cards, blog blockquotes. High WONK gives every letterform a hand-set journal feel.
Avoid
Long or multi-paragraph quotes (high WONK gets heavy), and anything smaller than ~15-16px.
3 usages in 3 components: testimonial-section, featured-stories, travel-story-card — plus the blog .blog-post-content blockquote rule.
The occasional oversized pull-quote — full-width section breaks between story chapters.
.font-display-quote-hero“Somewhere past Theth the road forgets it was ever a road — and the real Albania begins.”
Use for
Rare, large display quotes: full-bleed chapter-break pull-quotes. WONK 1.0 is the absolute max of the axis — maximum hand-drawn irregularity.
Avoid
Small text (opsz 120 is tuned for large display type — keep it text-2xl and up), repeated use, and long passages.
1 usage: the story-detail excerpt pull-quote. Built for full-width section breaks between story chapters.
Line-height steps with measure — tall & relaxed for wide editorial measures, slightly tighter for compact UI text. Tuned in :root of globals.css alongside the Fraunces axes.
| Token | Value | Use |
|---|---|---|
--body-leading-base | 1.6 | Default paragraphs (air) — wide cards, UI text |
--body-leading-tight | 1.7 | Tight rhythm — hero subtitles, section intros, compact UI |
--body-leading-comfortable | 1.75 | Lead paragraphs — comfortable editorial intro lines |
--body-leading-prose | 1.8 | Long-form editorial — blog posts, stories |
--measure-prose | 72ch | Classic comfortable line length — long-form reading |
--measure-lead | 60ch | Lead paragraphs — slightly shorter measure for larger type |
measure-prose · 72ch
Long-form editorial copy stays within the classic comfortable line length. When a line runs too wide, the eye loses its place; capped at 72ch with balanced wrapping, the rag stays even and the reading rhythm stays calm — paragraph after paragraph, chapter after chapter.
This page is intentionally not indexed and not linked from the navigation — it exists to keep the type system deliberate, not to compete with it. When in doubt about a heading, come back here and pick the voice on purpose.