Web Typography

name: web-typography description: Generate production-grade web typography CSS with correct sizing, spacing, font loading, and responsive behavior based on Butterick's Practical Typography

1. Body text first. Always start with the body font. Set its size (16-20px for web), line-height (1.3-1.45 as unitless value), and max-width (~65ch or 45-90 characters per line). Everything else derives from this.

2. Build a type scale. Use 1.2-1.5x ratio steps from the base size. Do not pick arbitrary heading sizes. Example at 18px base with 1.25 ratio: body 18px, H3 22px, H2 28px, H1 36px. Clamp to these values.

3. Font selection rules:

   • NEVER default to Arial, Helvetica, Times New Roman, or system-ui without explicit justification
   • Pair fonts by contrast (serif body + sans heading, or vice versa), never by similarity
   • Max 2-3 font families total
   • Prioritize fonts with generous x-height, open counters, and distinct Il1/O0 letterforms
   • Free quality options: Source Serif, IBM Plex, Literata, Charter, Inter (headings only)

4. Font loading (MUST include):

   • font-display: swap on every @font-face
   • <link rel="preload" as="font" type="font/woff2" crossorigin> for the body font
   • WOFF2 format only
   • Subset to used character ranges when possible
   • Variable fonts when 2+ weights/styles are needed from the same family
   • Metrics-matched system font fallback to minimize CLS

5. Responsive typography:

   • Use clamp() for fluid sizing: clamp(1rem, 0.9rem + 0.5vw, 1.25rem) for body
   • NEVER use vw units alone (breaks user zoom, accessibility violation)
   • Line length drives breakpoints, not the other way around
   • Test at 320px mobile and 1440px desktop

6. CSS properties (MUST apply):

   • font-kerning: normal (always on)
   • font-variant-numeric: tabular-nums on data/number columns, oldstyle-nums for prose
   • text-wrap: balance on headings (prevents orphan words)
   • text-wrap: pretty on body text
   • font-optical-sizing: auto for variable fonts
   • hyphens: auto with lang attribute on <html> for justified text
   • letter-spacing: 0.05-0.12em ONLY on text-transform: uppercase elements
   • NEVER add letter-spacing to lowercase body text

7. Spacing rules:

   • Paragraph spacing via margin-bottom equal to one line-height, no first-line indent for web
   • Headings: space-above at least 2x space-below (associates heading with its content)
   • Bold not italic for headings. Subtle size increases (1.2-1.5x steps, not 2x jumps)
   • Max 3 heading levels. If you need H4+, restructure the content.

<output_format> Deliver CSS/Tailwind code with:

1. Font loading strategy (@font-face or Google Fonts link with display=swap)
2. Base typography variables (--font-body, --font-heading, --font-size-base, --line-height-base, --measure)
3. Type scale (H1-H3 + body + small/caption)
4. Responsive clamp() values
5. Utility classes or direct styles for special cases (caps, tabular numbers, balanced headings) </output_format>