Typography
Two fonts, clear roles. Fraunces for personality in headings, Inter for clarity in everything else.
Font Families
Headings
Fraunces
Used for H1, H2, H3 -- page titles, section headers, card titles. If it names or introduces a section, use Fraunces.
--font-heading: 'Fraunces', Georgia, serif;
Body & UI
Inter
Used for H4, body text, buttons, labels, UI elements. If it describes, labels, or instructs, use Inter.
--font-body: 'Inter', -apple-system, sans-serif;
Type Scale
Live preview of every size in the scale.
--text-display
46px / Fraunces / 700
Display Text
--text-h1
32px / Fraunces / 700
Page Title H1
--text-h2
24px / Fraunces / 700
Section Header H2
--text-h3
20px / Fraunces / 600
Card Title H3
--text-h4
18px / Inter / 600
UI Subheading H4
--text-body
16px / Inter / 400
Body paragraph text used for content and descriptions.
--text-small
14px / Inter / 400
Small text for meta info and secondary content.
--text-caption
12px / Inter / 500
CAPTION TEXT FOR LABELS AND TIMESTAMPS
Quick Reference: What Size for What
| Element | Size Token | Font | Weight |
|---|---|---|---|
| Hero headline | --text-display | Fraunces | 700 |
| Page title | --text-h1 | Fraunces | 700 |
| Section header | --text-h2 | Fraunces | 700 |
| Card title | --text-h3 | Fraunces | 600 |
| UI subheading | --text-h4 | Inter | 600 |
| Body paragraph | --text-body | Inter | 400 |
| Button label | --text-small to --text-body | Inter | 600 |
| Duration/meta badge | --text-small | Inter | 500 |
| Timestamp, caption | --text-caption | Inter | 500 |
Font Weights
Aa
Normal
400
--font-normal
Body text
Aa
Medium
500
--font-medium
Labels, badges
Aa
Semibold
600
--font-semibold
Card titles, buttons
Aa
Bold
700
--font-bold
Page titles, display
Line Heights
| Token | Value | Usage |
|---|---|---|
--leading-tight | 1.2 | Headlines -- compact, punchy |
--leading-snug | 1.35 | Card titles, small headings |
--leading-normal | 1.5 | Body text -- comfortable reading |
--leading-relaxed | 1.625 | Long-form content, articles |
Letter Spacing
| Token | Value | Usage |
|---|---|---|
--tracking-tight | -0.02em | Headlines -- pulls letters together |
--tracking-normal | 0 | Body text |
--tracking-wide | 0.025em | Uppercase labels, button text |
Display Text Pattern
Hero/display text uses a distinctive two-part styling with an italic emphasis word.
Transform Your Facilitation
<h1 class="display-text">Transform Your <em>Facilitation</em></h1>
.display-text em {
font-style: italic;
color: var(--phase-learn-dark);
text-decoration: underline;
text-decoration-color: var(--phase-learn-light);
text-decoration-thickness: 8px;
text-underline-offset: 0;
}