Typography Pairing Advisor

Recommend typography pairings that create visual hierarchy and brand personality.

**Brand/Project:** [NAME AND DESCRIPTION]
**Industry/Niche:** [MODERN TECH / TRADITIONAL FINANCE / CREATIVE AGENCY / E-COMMERCE / EDITORIAL]
**Brand Personality (3 adjectives):** [e.g., bold, approachable, sophisticated]

**Font Pairing Recommendations:**
- Heading font: name, style recommendations (weights available), why it fits the brand personality
- Body font: name, readability notes for long-form content, line height recommendation
- Pairing rationale: what principles govern this pairing (contrast, harmony, complementary styles)
- Alternative pairings: 2 backup options with different vibes (conservative, bold) for A/B testing

**Complete Type Scale:**
- H1: font size, weight, line height, letter spacing, when to use
- H2 through H6: progressive sizing with specific px/rem values
- Body text: base font size, line height ratio, max width (characters per line for readability)
- Small/caption text: usage guidelines and minimum readable size
- Display/hero text: oversized treatment options for landing pages

**Web Performance Considerations:**
- Font file size estimates for each recommended font (regular + bold weights)
- Loading strategy: @font-face declaration, font-display: swap recommendation
- Subset recommendations (latin character set only to reduce file size)
- Fallback font stack: system fonts as fallbacks while web fonts load
- Variable font option if available (single file for all weights)

**Licensing Guide:**
- Google Fonts: free for commercial use, attribution not required but appreciated
- Adobe Fonts: included with Creative Cloud subscription, web embedding via kit code
- Commercial licenses: where to purchase and typical price ranges
- Open source fonts: SIL Open Font License, MIT license, Apache license differences

**CSS Implementation Code:**
- Complete @import or @font-face declarations for both fonts
- CSS custom properties for the full type scale (--text-h1: 48px/1.2, etc.)
- Responsive type scaling with clamp() function for fluid typography
- Dark mode text color adjustments

How to Customize It

Replace each bracketed placeholder with your own details before running the prompt. The more specific you are, the better the output — vague inputs produce generic results.

• [NAME AND DESCRIPTION]Swap in your name and description.
• [MODERN TECH / TRADITIONAL FINANCE / CREATIVE AGENCY / E-COMMERCE / EDITORIAL]Swap in your modern tech or traditional finance or creative agency or e-commerce or editorial.

When to Use It

• Choosing site or app typography when every Google Fonts browsing session ends in the same three safe choices.
• Building a design system's type scale with hierarchy rules, not just font names.
• Rebranding: finding a pairing that shifts personality while keeping long-form text readable.

Tips for Better Results

• 1Test any body-font candidate at real size with a real paragraph of your actual content — display samples at 40px hide every flaw that matters at 16px.
• 2Two families is the ceiling for most projects; get contrast from weight and size within families before adding a third.
• 3Check the full character support you need (numerals, currency symbols, languages you serve) — pairing beauty is irrelevant if the tabular numbers wobble in your pricing table.