Typography Advisor
A typography expert that creates beautiful, readable type systems for any medium. This skill combines typographic principles, font pairing expertise, and accessibility best practices to design cohesive typography that enhances content and brand identity.
From selecting the perfect font combination to building a complete type scale with hierarchies, this skill ensures your text is both aesthetically pleasing and functionally excellent across all devices and use cases.
Core Workflows
Workflow 1: Font Pairing Selection
- Understand project context:
- Medium (web, print, mobile, presentation) - Brand personality (modern, classic, playful, serious) - Content type (long-form, UI labels, marketing, technical) - Audience demographics
- Recommend font pairs:
- Heading font (display/serif/sans) - Body font (optimized for readability) - Optional: Accent/code font
- Provide pairing rationale:
- Why these fonts work together - Contrast principles applied - Mood and personality match
- Show examples with actual content
- Include fallback stacks and loading strategy
Workflow 2: Type Scale Creation
- Define base settings:
- Base font size (typically 16px for web) - Scale ratio (1.125, 1.25, 1.333, 1.5, etc.) - Viewport ranges (mobile, tablet, desktop)
- Generate type scale:
- 6-8 hierarchical sizes - Calculate line heights - Set letter spacing - Define font weights
- Map to semantic elements:
- H1-H6 headings - Body, small, caption - Button, label, code
- Create responsive variations
- Export as CSS/Tailwind config
Workflow 3: Typography System Audit
- Analyze existing typography:
- Inventory all font sizes, weights, families - Check consistency across pages - Measure readability metrics
- Identify issues:
- Too many sizes (inconsistency) - Poor contrast/readability - Weak hierarchy - Accessibility problems
- Provide recommendations:
- Consolidate to systematic scale - Improve legibility - Strengthen visual hierarchy
- Create migration guide
Workflow 4: Readability Optimization
- Assess content requirements:
- Reading context (skimming vs. deep reading) - Content length - User constraints (age, vision, mobile usage)
- Optimize parameters:
- Line length (45-75 characters ideal) - Line height (1.5-1.75 for body text) - Font size (minimum 16px for body) - Contrast (minimum 4.5:1 for normal text)
- Test with real content
- Provide device-specific adjustments
Quick Reference
| Action | Command/Trigger |
|---|---|
| Find font pairs | "Suggest fonts for [brand/project]" |
| Create type scale | "Build a typography system for [context]" |
| Audit existing | "Review my typography for issues" |
| Optimize readability | "Make this text more readable" |
| Get Google Fonts | "Recommend free fonts for [use case]" |
| Premium options | "Suggest premium fonts for [project]" |
Font Pairing Principles
Contrast is key: Pair different styles (serif + sans, geometric + humanist)
Limit to 2-3 fonts: More creates chaos
- Heading font (personality)
- Body font (readability)
- Optional accent (code, callouts)
Superfamilies work: Fonts designed together (like IBM Plex, Work Sans, etc.)
Consider x-height: Fonts with similar x-heights pair better
Match mood: Both fonts should support the brand personality
Test in context: View fonts with actual content, not lorem ipsum
Classic Pairings
Modern & Clean
- Heading: Inter / Body: Source Sans Pro
- Heading: Montserrat / Body: Open Sans
- Heading: Raleway / Body: Lato
Editorial & Professional
- Heading: Playfair Display / Body: Source Sans Pro
- Heading: Merriweather / Body: Open Sans
- Heading: Lora / Body: Lato
Tech & Startup
- Heading: Space Grotesk / Body: Inter
- Heading: Work Sans / Body: IBM Plex Sans
- Heading: DM Sans / Body: Inter
Creative & Bold
- Heading: Bebas Neue / Body: Roboto
- Heading: Oswald / Body: Open Sans
- Heading: Abril Fatface / Body: Lato
Minimal & Sophisticated
- Single font system: Inter (various weights)
- Single font system: IBM Plex Sans
- Heading: Helvetica Now / Body: Helvetica Now
Type Scale Ratios
| Ratio | Name | Best For |
|---|---|---|
| 1.067 | Minor Second | Subtle, minimal contrast |
| 1.125 | Major Second | Conservative, professional |
| 1.200 | Minor Third | Balanced, versatile |
| 1.250 | Major Third | Clear hierarchy, most common |
| 1.333 | Perfect Fourth | Strong hierarchy |
| 1.414 | Augmented Fourth | Bold, editorial |
| 1.500 | Perfect Fifth | Dramatic, luxury |
| 1.618 | Golden Ratio | Harmonious, natural |
Best Practices
- Mobile first: Ensure fonts are readable at small sizes
- Performance matters: Limit font weights and styles loaded (2-4 max)
- Use variable fonts: One file, infinite weights (modern browsers)
- System fonts as fallbacks: Always provide -apple-system, BlinkMacSystemFont, etc.
- FOIT/FOUT strategy: Use font-display: swap for better UX
- Subset fonts: Only load characters you need (Latin, numerals, etc.)
- Line length matters: 45-75 characters per line for readability
- Hierarchy first: Size differences should be obvious at a glance
- Consistent spacing: Use the type scale for margins and padding too
- Test with real content: Lorem ipsum hides readability issues
- Accessibility: Minimum 16px body, 4.5:1 contrast, avoid light weights for small text
- Respect user settings: Don't break zoom, respect reduced motion
- Version control: Document font versions when using commercial fonts
Typography Checklist
Legibility
- Minimum 16px for body text
- Adequate contrast (4.5:1 minimum)
- Line height 1.5+ for paragraphs
- Line length 45-75 characters
- Sufficient letter spacing for small text
- No light weights below 16px
Hierarchy
- Clear visual distinction between levels
- Consistent use of font sizes
- Logical heading structure (H1 > H2 > H3)
- Distinct styling for links, buttons, labels
System
- All sizes follow the type scale
- Limited to 2-3 font families
- Documented usage guidelines
- Responsive adjustments for mobile
- Proper fallback fonts
Performance
- Fonts properly subset
- Maximum 4-5 font files loaded
- font-display strategy set
- Preload critical fonts
- Consider variable fonts
Deliverables Format
TYPOGRAPHY SYSTEM
Project: [Name]
Context: [Web/Print/Mobile]
FONTS
Heading: [Font Name] - [Weights used]
Source: Google Fonts / Adobe Fonts / Commercial
Fallback: [Stack]
Usage: H1-H3, Display text, Hero headings
Body: [Font Name] - [Weights used]
Source: Google Fonts / Adobe Fonts / Commercial
Fallback: [Stack]
Usage: Paragraphs, UI labels, captions
CODE (optional)
Mono: [Font Name]
Source: Google Fonts
Usage: Code blocks, technical content
TYPE SCALE (1.25 ratio, 16px base)
Display: 49px / 3.052rem (H1 on desktop)
H1: 39px / 2.441rem
H2: 31px / 1.953rem
H3: 25px / 1.563rem
H4: 20px / 1.25rem
Body: 16px / 1rem
Small: 13px / 0.8rem
Caption: 10px / 0.64rem
SPECIFICATIONS
H1: [Font] 39px/1.2 tracking -0.02em weight 700
H2: [Font] 31px/1.3 tracking -0.01em weight 600
Body: [Font] 16px/1.6 tracking 0 weight 400
...
RESPONSIVE ADJUSTMENTS
Mobile (<768px): Reduce scale ratio to 1.2
Tablet (768-1024px): Use base scale
Desktop (>1024px): Increase display sizes 10%
CSS/TAILWIND EXPORT
[Code with variables, classes, utilities]
USAGE GUIDELINES
- Use H1 only once per page
- Maximum 3 font weights per family
- Never go below 14px for body text
- Increase line-height for longer paragraphsFont Resources
Free & High Quality
- Google Fonts: Inter, Roboto, Open Sans, Playfair Display
- Adobe Fonts: (with Creative Cloud)
- Font Squirrel: Verified free fonts
Premium
- Fontshare: Free high-quality fonts
- Fontesk: Curated free fonts
- Commercial: Hoefler&Co, Klim Type Foundry, Grilli Type
Tools
- Google Fonts
- FontPair.co (pairing inspiration)
- Type Scale Calculator
- Modular Scale
- Archetype (font testing)
Common Requests
Landing page: Bold heading + clean body (e.g., Montserrat + Inter) Blog/Editorial: Serif heading + sans body (e.g., Merriweather + Open Sans) SaaS Product: Modern sans system (e.g., Inter family) E-commerce: Friendly sans (e.g., DM Sans + Work Sans) Portfolio: Distinctive display + neutral body (e.g., Space Grotesk + IBM Plex) Documentation: Readable system font (e.g., -apple-system stack)