How do I use the "Design Typography Combinations" prompt?

Copy the prompt template, fill in the variables (PROJECT_TYPE, BRAND_PERSONALITY, TARGET_AUDIENCE, USE_CASE, PLATFORM, BUDGET_LEVEL), and paste it into ChatGPT, Claude, or Gemini.

What AI tools work with this creative prompt?

This prompt works with chatgpt, claude, gemini. Simply copy and paste the template into any of these AI assistants.

Tips for getting the best results?

Test typography combinations at different screen sizes to ensure readability across devices Limit yourself to 2-3 font families maximum to maintain visual cohesion Consider font loading performance - preload critical weights and use font-display: swap Verify sufficient color contrast ratios, especially for body text and smaller sizes Always specify comprehensive font fallback stacks for better cross-platform consistency

creative intermediate

Design Typography Combinations

Generate perfect font pairings and typography combinations for any design project. Create harmonious type hierarchies with AI assistance.

Works with: chatgptclaudegemini

Prompt Template

As a typography expert, I need you to create comprehensive typography combinations for a [PROJECT_TYPE] project with a [BRAND_PERSONALITY] aesthetic. Project Details: - Target audience: [TARGET_AUDIENCE] - Primary use case: [USE_CASE] - Platform/medium: [PLATFORM] - Budget consideration: [BUDGET_LEVEL] (free fonts only, premium allowed, or mix) For each typography combination, provide: 1. **Primary Typeface** (for headlines/titles) - Font name and foundry - Why it fits the brand personality - Recommended weights and styles - Fallback options 2. **Secondary Typeface** (for body text/paragraphs) - Font name and foundry - Readability considerations - Optimal sizing and line height - Fallback options 3. **Accent Typeface** (optional, for special elements) - When and how to use sparingly - Specific applications 4. **Typography Hierarchy** - H1, H2, H3 size relationships - Body text, captions, and UI text specifications - Color and contrast recommendations 5. **Technical Implementation** - Web font loading considerations - CSS font-stack recommendations - Performance optimization tips Provide 3 different typography combinations, ranging from conservative to bold, with brief explanations of when each would work best. Include specific font sizes, weights, and spacing recommendations for optimal visual hierarchy.

Variables to Customize

[PROJECT_TYPE]

The type of design project needing typography

Example: modern SaaS website

[BRAND_PERSONALITY]

The desired brand aesthetic and personality

Example: professional yet approachable

[TARGET_AUDIENCE]

The primary audience for the design

Example: tech-savvy business professionals aged 25-45

[USE_CASE]

Primary purpose and content type

Example: product landing pages and blog articles

[PLATFORM]

Where the typography will be used

Example: responsive web and mobile app

[BUDGET_LEVEL]

Font licensing budget constraints

Example: mix of free and premium fonts acceptable

Example Output

**Typography Combinations for Modern SaaS Website** **Option 1: Conservative Professional** - **Primary:** Inter (Google Fonts) - Clean, highly legible sans-serif perfect for tech brands - **Secondary:** Inter (lighter weights) - Maintains consistency while ensuring readability - **Hierarchy:** H1: 48px/52px, H2: 36px/40px, Body: 16px/24px - **Implementation:** font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif **Option 2: Balanced Modern** - **Primary:** Poppins Bold - Geometric sans-serif with friendly personality - **Secondary:** Source Sans Pro - Highly readable, pairs excellently with Poppins - **Accent:** Fira Code for code snippets - **Hierarchy:** Creates clear distinction while maintaining approachability **Option 3: Bold Contemporary** - **Primary:** Space Grotesk - Modern, distinctive headlines - **Secondary:** IBM Plex Sans - Technical heritage matches SaaS context - **Implementation:** Preload critical font weights, use font-display: swap Each combination includes specific CSS recommendations, loading optimization strategies, and mobile responsiveness considerations for optimal user experience across devices.

Pro Tips for Best Results

Test typography combinations at different screen sizes to ensure readability across devices
Limit yourself to 2-3 font families maximum to maintain visual cohesion
Consider font loading performance - preload critical weights and use font-display: swap
Verify sufficient color contrast ratios, especially for body text and smaller sizes
Always specify comprehensive font fallback stacks for better cross-platform consistency