Pick a role, not a size. Each role below has one set of classes that scale across breakpoints. Sizes are in px at the site’s 18px root, from mobile up to the largest screen.

Kepler Display uses two weights only: Regular (400) for every heading role, and Semibold (600) for Card Titles, where small titles need the extra weight to hold up in grids.

DisplayKepler Display Regular 400 · 40.5 → 54 → 67.5 → 81 → 108 pxHome hero only. One per site, not one per page.

A with-God life.

font-display font-normal leading-none text-4xl sm:text-5xl md:text-6xl lg:text-7xl xl:text-8xl

Page TitleKepler Display Regular 400 · 40.5 → 54 → 67.5 → 81 pxThe h1 in every page hero. Same steps as Display, stopping one short so the home hero stays the largest moment.

Renovaré Book Club

font-display font-normal leading-none text-4xl sm:text-5xl md:text-6xl lg:text-7xl

Section HeadingKepler Display Regular 400 · 33.75 → 40.5 → 54 → 67.5 pxOpens a band or section (the intro component). One step below Page Title at every breakpoint.

Resources for the journey

font-display font-normal leading-none text-3xl sm:text-4xl md:text-5xl lg:text-6xl

Panel HeadingKepler Display Regular 400 · 33.75 → 36 pxHeadlines inside CTA panels, letters and feature boxes.

Join the Email Community

font-display font-normal leading-tight text-3xl md:text-[2rem]

Card TitleKepler Display Semibold 600 · 22.5 → 27 → 33.75 pxTitles on click-through cards. Sizes follow the card’s width (container queries).

Learning Humility

font-display font-semibold leading-snug text-xl @sm:text-2xl @md:text-3xl

SubtitleKepler Display Regular 400 · 22.5 → 27 pxThe line under a Page Title, and small headings in Kepler.

A guided journey through four soul-shaping books

font-display font-normal leading-normal text-xl md:text-2xl

Label HeadingDM Sans Medium 500 · 20.25 → 22.5 pxSmall functional headings in DM Sans: list groups, form sections, footers.

Upcoming Events

font-sans font-medium leading-snug text-lg md:text-xl

Section EyebrowDM Sans Bold 700 · 20.25 pxAbove a Section Heading. Primary 500 on light bands, Primary 300 on dark bands.

Formation

font-sans font-bold leading-tight tracking-wider uppercase text-lg text-primary

EyebrowDM Sans Bold 700 · 13.5 pxSmall labels: card meta, dates, “A Renovaré Podcast”.

Podcast Episode

font-sans font-bold leading-tight tracking-wider uppercase text-xs

Body LargeDM Sans Regular 400 · 22.5 → 27 pxHero and intro paragraphs.

Curated Christian wisdom and Renovaré updates, every Friday.

font-sans font-normal leading-relaxed text-xl lg:text-2xl

BodyDM Sans Regular 400 · 18 pxDefault paragraph text.

Renovaré is a Christian nonprofit that models, resources, and advocates fullness of life in Christ.

font-sans font-normal leading-relaxed text-base

SmallDM Sans Regular 400 · 15.75 pxCaptions, card descriptions, fine print.

Hosted by Nathan Foster. New episodes every other week.

font-sans font-normal leading-relaxed text-sm

Pull QuoteKepler Medium 500 · 27 → 33.75 → 40.5 pxQuote slices and testimonials.

“We are invited into a life with God that is unhurried and whole.”

font-serif font-medium leading-snug text-balance text-2xl md:text-3xl lg:text-4xl

Prose

Rich-text blocks use one of two prose styles. Choose by how the text will be read, not by section.

Style	Use for	Classes	Spec
Voice (serif)	Articles, letters, reflections — read slowly	`prose`	Kepler, weight 360, 20.7px / 1.6, optical size 14, width 102%. Headings inside switch to DM Sans Bold.
Info (sans)	FAQs, event details, instructions — scanned	`prose prose-sans`	DM Sans 400, 19.8px / 1.6. Headings DM Sans Bold.

Letters and Quotes are always Voice. FAQs, Feature Grids, CTAs and Events are always Info.

Rules

One Display per site (the home hero) and one Page Title per page. Page Titles stop at 81px; only the home hero reaches 108px.
Headings are Title Case without a final period; body is sentence case.
Don’t set headings in DM Sans except Label Heading and prose headings.
Eyebrows sit directly above the heading they introduce, never alone.