Fd Typography

Choose fonts that align with brand personality:

2. Font Pairing Principles

Create harmonious combinations with contrast:

## Font Pairing Rules

1. **Contrast is key** — Pair fonts with distinct characteristics
2. **Limit to 2 fonts** — One for headings, one for body (max 3)
3. **Match x-heights** — Fonts should have similar x-heights for harmony
4. **Serif + Sans** — Classic pairing that almost always works
5. **Same family** — Use weight/style variants of one superfamily

## Recommended Pairing Patterns

| Pattern | Heading | Body | Mood |
|---------|---------|------|------|
| Modern Editorial | Playfair Display | Inter | Sophisticated |
| Clean Tech | Geist | Geist | Minimal |
| Warm & Friendly | Plus Jakarta Sans | Inter | Approachable |
| Cinematic | Bebas Neue | Open Sans | Bold, dramatic |
| Classic | Georgia | -apple-system | Timeless |

3. Typographic Scale

Use mathematical ratios for harmonious sizing:

Example Scale (Major Third, base 16px):

text-xs:   12px  (0.75rem)
text-sm:   14px  (0.875rem)
text-base: 16px  (1rem)      ← Base size
text-lg:   20px  (1.25rem)
text-xl:   25px  (1.563rem)
text-2xl:  31px  (1.953rem)
text-3xl:  39px  (2.441rem)
text-4xl:  49px  (3.052rem)

4. Responsive Typography

Make text adapt smoothly across devices:

/* Fluid typography using clamp() */
h1 {
  font-size: clamp(2rem, 5vw + 1rem, 4rem);
}

h2 {
  font-size: clamp(1.5rem, 3vw + 0.75rem, 2.5rem);
}

p {
  font-size: clamp(1rem, 1vw + 0.75rem, 1.125rem);
}

Tailwind CSS v4 Fluid Typography:

@theme {
  --font-size-fluid-sm: clamp(0.875rem, 0.8rem + 0.25vw, 1rem);
  --font-size-fluid-base: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);
  --font-size-fluid-lg: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  --font-size-fluid-xl: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  --font-size-fluid-2xl: clamp(2rem, 1.5rem + 3vw, 4rem);
}

Readability Guidelines

Line Length (Measure)

Optimal characters per line for readability:

Line Height (Leading)

Letter Spacing (Tracking)

Tailwind CSS Typography Implementation

Defining Custom Fonts

/* globals.css */
@import "tailwindcss";

@theme {
  /* Font families */
  --font-sans: "Inter", "Geist", system-ui, sans-serif;
  --font-display: "Playfair Display", Georgia, serif;
  --font-mono: "Geist Mono", "Fira Code", monospace;
  
  /* Custom font sizes */
  --font-size-display: 3.5rem;
  --font-size-display--line-height: 1.1;
  --font-size-display--letter-spacing: -0.02em;
}

Using @tailwindcss/typography Plugin

For rich content (markdown, CMS content):

// For prose content
<article className="prose prose-lg dark:prose-invert max-w-none">
  {/* Markdown/HTML content */}
</article>

// Customizing prose
<article className="prose prose-headings:text-foreground prose-p:text-muted-foreground">
  {content}
</article>

Component Typography Patterns

// Heading hierarchy
<h1 className="text-4xl font-bold tracking-tight">Page Title</h1>
<h2 className="text-2xl font-semibold tracking-tight">Section Title</h2>
<h3 className="text-xl font-medium">Subsection</h3>

// Body text
<p className="text-base leading-relaxed text-muted-foreground">
  Body content with comfortable reading experience.
</p>

// Small/meta text
<span className="text-sm text-muted-foreground">
  Meta information
</span>

// Display/hero text
<h1 className="text-5xl md:text-7xl font-bold tracking-tighter">
  Hero Statement
</h1>

Font Loading Best Practices

Performance Optimization

## Font Loading Checklist

1. **Self-host fonts** — Avoid Google Fonts for privacy/performance
2. **Use WOFF2 format** — Best compression, wide support
3. **Limit font weights** — Only load weights you use (e.g., 400, 500, 700)
4. **Preload critical fonts** — Add to document head
5. **Use font-display: swap** — Prevent invisible text
6. **Subset fonts** — Remove unused characters for smaller files

Next.js Font Configuration

// app/layout.tsx
import { Inter, Playfair_Display } from "next/font/google";

const inter = Inter({
  subsets: ["latin"],
  variable: "--font-sans",
  display: "swap",
});

const playfair = Playfair_Display({
  subsets: ["latin"],
  variable: "--font-display",
  display: "swap",
});

export default function RootLayout({ children }) {
  return (
    <html className={`${inter.variable} ${playfair.variable}`}>
      <body className="font-sans">{children}</body>
    </html>
  );
}

Local Font Loading

import localFont from "next/font/local";

const geist = localFont({
  src: [
    { path: "./fonts/Geist-Regular.woff2", weight: "400" },
    { path: "./fonts/Geist-Medium.woff2", weight: "500" },
    { path: "./fonts/Geist-Bold.woff2", weight: "700" },
  ],
  variable: "--font-sans",
});

Typography Accessibility

Minimum Standards

Accessible Font Choices

## Accessibility Considerations

- Avoid thin font weights (< 300) for body text
- Don't use all caps for long text passages
- Ensure adequate contrast in all themes
- Use semantic heading hierarchy (h1 → h2 → h3)
- Don't rely on font style alone to convey meaning

Consultation Workflow

Step 1: Discovery Questions

## Typography Discovery

1. **Brand personality?** What did fd-design-philosophy establish?
2. **Content types?** Headlines, articles, metadata, UI labels?
3. **Existing fonts?** Any brand fonts to incorporate?
4. **Reading context?** Quick scanning or deep reading?
5. **Cinematic feel?** Bold dramatic or refined elegant?

Step 2: Research Fonts

Use web search to explore options:

Research patterns:
- "best fonts for [industry] websites 2024"
- "font pairing [primary font name]"
- "[font name] alternatives free"
- "variable fonts for web design"

Key resources:

• Google Fonts: https://fonts.google.com
• Fontshare (free): https://fontshare.com
• Font Pairing: https://fontpair.co
• Type Scale: https://typescale.com

Step 3: Present Typography Options

## Typography Option A: "Modern Editorial"

**Alignment**: Sophisticated, cinematic, curated

### Font Stack
- **Display/Headings**: Playfair Display (serif)
- **Body/UI**: Inter (sans-serif)
- **Mono** (code): Geist Mono

### Scale (Major Third - 1.25)
| Token | Size | Weight | Use |
|-------|------|--------|-----|
| display | 48-72px | 700 | Hero headlines |
| h1 | 36px | 600 | Page titles |
| h2 | 28px | 600 | Section headers |
| h3 | 22px | 500 | Card titles |
| body | 16px | 400 | Paragraphs |
| small | 14px | 400 | Captions, meta |
| xs | 12px | 500 | Labels, badges |

### Sample Pairing
Playfair Display 700 + Inter 400:
"Discover curated short films from creators you love."

Step 4: Generate Implementation

After approval, provide Tailwind/Next.js implementation code.

Research Commands

When you need typography resources:

Font Discovery

web_search: "best sans serif fonts for [industry] 2024"
web_search: "[font name] font pairing suggestions"
read_web_page: https://fonts.google.com (browse fonts)
read_web_page: https://fontshare.com (free quality fonts)

Typography Tools

web_search: "typographic scale calculator"
read_web_page: https://typescale.com
web_search: "fluid typography generator clamp"

Documentation

read_web_page: https://tailwindcss.com/docs/font-family
read_web_page: https://tailwindcss.com/docs/font-size
read_web_page: https://nextjs.org/docs/app/building-your-application/optimizing/fonts

Handoff to Other Experts

Typography Specification Template

## Typography System Specification

### Font Stack
| Role | Font | Fallback | Variable |
|------|------|----------|----------|
| Sans (UI/Body) | Inter | system-ui, sans-serif | --font-sans |
| Display | Playfair Display | Georgia, serif | --font-display |
| Mono | Geist Mono | monospace | --font-mono |

### Type Scale
| Token | Size | Line Height | Weight | Tracking |
|-------|------|-------------|--------|----------|
| display | 48px | 1.1 | 700 | -0.02em |
| h1 | 36px | 1.2 | 600 | -0.01em |
| ... | ... | ... | ... | ... |

### Usage Guidelines
- Headings: font-display for h1, font-sans for h2-h6
- Body: font-sans at 16px/1.625 line-height
- UI Labels: font-sans at 14px medium weight

Key Principles

1. Readability First — Every choice serves comprehension
2. Hierarchy Through Size & Weight — Not just visual, but semantic
3. Performance Matters — Fewer fonts, optimized loading
4. Responsive by Default — Fluid scales, not breakpoint jumps
5. Accessibility Non-Negotiable — Meet WCAG standards always