Typography System

Three distinct styles for different content types and aesthetic preferences. All styles share core principles: optimal reading measure (65-75 characters), responsive scaling, dark mode support, and mobile-first design.

Style Selection Guide

Style	Best For	Character
Modern	Professional updates, tech announcements, newsletters	Clean, efficient, contemporary
Classic	Personal letters, formal notices, traditional content	Warm, authoritative, timeless
Serif	Essays, theses, literary content, long-form	Refined, bookish, sophisticated

Modern

System fonts with tight spacing. Best for professional and tech content where clarity trumps personality.

Typography: System UI stack (San Francisco, Segoe UI, Roboto). Font size scales from 1.05rem to 1.2rem. Line height 1.7 for comfortable scanning. Max-width 720px.

Color palette: Pure white background (#ffffff), near-black text (#1a1a1a), blue accent (#2563eb). Dark mode inverts cleanly to #0f0f0f background.

Headers: Bold (700 weight), tight letter-spacing (-0.02em). Same font as body for cohesion.

Ideal length: 500-2000 words. Works well for announcements, updates, professional correspondence.

Classic

Serif fonts with generous spacing. Warm, traditional aesthetic that suits formal and personal content.

Typography: Georgia with Times New Roman fallback. Larger base size (1.1rem to 1.25rem). Line height 1.85 for leisurely reading. Max-width 680px for optimal measure.

Color palette: Cream background (#faf8f5) evokes quality paper. Warm brown text (#2c2825). Sienna accent (#8b4513). Dark mode uses warm dark tones (#1a1816).

Headers: Normal weight (400) for understated elegance. Same serif family maintains consistency.

Special feature: Drop cap on first paragraph for long-form content, adding traditional typographic flair.

Ideal length: Any length. Particularly suited for personal letters, formal announcements, traditional correspondence.

Serif

Palatino-based serif with refined spacing. Bookish aesthetic for substantive content.

Typography: Palatino with Georgia fallback. Balanced size (1.08rem to 1.22rem). Line height 1.8 provides breathing room for dense content. Max-width 700px.

Color palette: Near-white with warmth (#fcfcfa). Deep charcoal text (#1f1f1f). Slate accent (#4a5568). Dark mode uses subtle warm dark (#141413).

Headers: Semi-bold (600 weight) for visual hierarchy. Same Palatino family as body for cohesion.

Ideal length: 1000+ words. Best for essays, theses, research summaries, literary content.

Shared Principles

All styles implement:

Responsive scaling: Font sizes use clamp() for fluid scaling between mobile and desktop. No jarring breakpoints.

Reading comfort: Justified text on desktop with hyphenation for even margins. Left-aligned on mobile for readability on narrow screens.

Dark mode: Automatic via prefers-color-scheme. Colors chosen for WCAG AA contrast in both modes.

Print optimization: Clean printing with appropriate margins and no background colors.

Performance: No external font loading—all styles use system fonts for instant rendering.

Content Structure

The render code expects:

• title — The letter's headline
• content — Markdown body text
• style — One of: modern, classic, serif
• author — Optional byline
• date — Optional publication date
• imageUrl — Optional header image (hosted URL)

Output is a single self-contained HTML file under 50KB with all styles embedded. No external dependencies ensures fast loading and permanent availability.