# Type Scale

> Every text style on renovare.org — Display, Page Title, Section Heading, Card Title, Eyebrow, Body and more — with sizes and Tailwind classes.

*Thirteen roles, two Kepler weights.*

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.

| Role | Use | Font & weight | Sizes (px, mobile → desktop) | Classes | Site partial |
|---|---|---|---|---|---|
| Display | Home hero only. One per site, not one per page. | Kepler Display Regular 400 | 40.5 → 54 → 67.5 → 81 → 108 | `font-display font-normal leading-none text-4xl sm:text-5xl md:text-6xl lg:text-7xl xl:text-8xl` | `_typography/h1` |
| Page Title | The h1 in every page hero. Same steps as Display, stopping one short so the home hero stays the largest moment. | Kepler Display Regular 400 | 40.5 → 54 → 67.5 → 81 | `font-display font-normal leading-none text-4xl sm:text-5xl md:text-6xl lg:text-7xl` | `_typography/page_title` |
| Section Heading | Opens a band or section (the intro component). One step below Page Title at every breakpoint. | Kepler Display Regular 400 | 33.75 → 40.5 → 54 → 67.5 | `font-display font-normal leading-none text-3xl sm:text-4xl md:text-5xl lg:text-6xl` | `_typography/h2 with weight: "font-normal"` |
| Panel Heading | Headlines inside CTA panels, letters and feature boxes. | Kepler Display Regular 400 | 33.75 → 36 | `font-display font-normal leading-tight text-3xl md:text-[2rem]` | `_typography/h4` |
| Card Title | Titles on click-through cards. Sizes follow the card’s width (container queries). | Kepler Display Semibold 600 | 22.5 → 27 → 33.75 | `font-display font-semibold leading-snug text-xl @sm:text-2xl @md:text-3xl` | `_typography/h4 with size/weight overrides` |
| Subtitle | The line under a Page Title, and small headings in Kepler. | Kepler Display Regular 400 | 22.5 → 27 | `font-display font-normal leading-normal text-xl md:text-2xl` | `_typography/h5` |
| Label Heading | Small functional headings in DM Sans: list groups, form sections, footers. | DM Sans Medium 500 | 20.25 → 22.5 | `font-sans font-medium leading-snug text-lg md:text-xl` | `_typography/h6` |
| Section Eyebrow | Above a Section Heading. Primary 500 on light bands, Primary 300 on dark bands. | DM Sans Bold 700 | 20.25 | `font-sans font-bold leading-tight tracking-wider uppercase text-lg text-primary` | `_typography/meta with size: "text-lg"` |
| Eyebrow | Small labels: card meta, dates, “A Renovaré Podcast”. | DM Sans Bold 700 | 13.5 | `font-sans font-bold leading-tight tracking-wider uppercase text-xs` | `_typography/meta` |
| Body Large | Hero and intro paragraphs. | DM Sans Regular 400 | 22.5 → 27 | `font-sans font-normal leading-relaxed text-xl lg:text-2xl` | `_typography/paragraph with size: "xl"` |
| Body | Default paragraph text. | DM Sans Regular 400 | 18 | `font-sans font-normal leading-relaxed text-base` | `_typography/paragraph` |
| Small | Captions, card descriptions, fine print. | DM Sans Regular 400 | 15.75 | `font-sans font-normal leading-relaxed text-sm` | `_typography/paragraph with size: "sm"` |
| Pull Quote | Quote slices and testimonials. | Kepler Medium 500 | 27 → 33.75 → 40.5 | `font-serif font-medium leading-snug text-balance text-2xl md:text-3xl lg:text-4xl` | `_slices/sliceQuote` |

## 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.