home / skills / onewave-ai / claude-skills / font-pairing-suggester

font-pairing-suggester skill

safe

This skill helps you select harmonious font pairings and Google Fonts alternatives with practical hierarchy examples for branding and UI design.

npx playbooks add skill onewave-ai/claude-skills --skill font-pairing-suggester

Review the files below or copy the command above to add this skill to your agents.

Files (1)

SKILL.md

1.4 KB

---
name: font-pairing-suggester
description: Recommend font combinations for different use cases. Provide Google Fonts alternatives to premium fonts with hierarchy examples.
---

# Font Pairing Suggester
Recommend font combinations for different use cases. Provide Google Fonts alternatives to premium fonts with hierarchy examples.

## Instructions

You are an expert at typography and font pairing. Suggest harmonious font combinations, provide alternatives, and show hierarchy examples.

### Output Format

```markdown
# Font Pairing Suggester Output

**Generated**: {timestamp}

---

## Results

[Your formatted output here]

---

## Recommendations

[Actionable next steps]

```

### Best Practices

1. **Be Specific**: Focus on concrete, actionable outputs
2. **Use Templates**: Provide copy-paste ready formats
3. **Include Examples**: Show real-world usage
4. **Add Context**: Explain why recommendations matter
5. **Stay Current**: Use latest best practices for design

### Common Use Cases

**Trigger Phrases**:
- "Help me with [use case]"
- "Generate [output type]"
- "Create [deliverable]"

**Example Request**:
> "[Sample user request here]"

**Response Approach**:
1. Understand user's context and goals
2. Generate comprehensive output
3. Provide actionable recommendations
4. Include examples and templates
5. Suggest next steps

Remember: Focus on delivering value quickly and clearly!

Overview

This skill recommends harmonious font combinations tailored to specific use cases and design goals. It suggests Google Fonts equivalents for premium typefaces and provides clear hierarchy examples for headings, subheads, body, and captions. Recommendations are actionable and ready to paste into CSS or design tokens. The output emphasizes readability, contrast, and brand fit.

How this skill works

The skill analyzes the target use case (web, mobile app, print, email, or brand identity) and selects complementary serif, sans-serif, slab, or display pairings. For each premium font mentioned, it proposes one or more Google Fonts alternatives and shows a simple hierarchy with recommended sizes, weights, and line-height. It also flags accessibility considerations like contrast and legibility for body text.

When to use it

Selecting typography for a new website or product UI
Replacing premium fonts with free Google Fonts for budget-friendly builds
Creating typographic systems for brand guidelines or style guides
Designing marketing materials where hierarchy and legibility matter
A/B testing type combinations for conversion or readability improvements

Best practices

Define primary function (brand voice, editorial, UI) before pairing fonts
Limit families to 2–3 complementary fonts to maintain cohesion
Prioritize legibility for body text: 16px base, 1.4–1.6 line-height on web
Match x-height and contrast when pairing modern with traditional styles
Provide size and weight tokens for headings, subheads, body, and captions

Example use cases

Modern SaaS website: suggest a neutral sans for UI with a warm humanist serif for headings, include Google Fonts swaps and CSS variables
Mobile app UI: prioritize a single versatile sans for all UI elements with a distinct display for marketing screens
Editorial blog: recommend a readable serif for body and a condensed sans for headlines, with sample font-size scale
Email campaign: propose web-safe alternatives and inline CSS snippets to preserve hierarchy across clients
Brand refresh: give a primary and secondary family, specify weights and usage rules for logos, headlines, and long-form content

FAQ

Can you fully replace a premium font with a Google Fonts alternative?

Yes, often a Google Font can approximate style and metrics, but test visual rhythm and kerning in your layout; adjust tracking and sizes if needed.

How many fonts should I use in a project?

Aim for 2–3 families: a primary for UI/body, a secondary for headings or accents, and an optional display for special use to keep designs consistent and performant.

Do you provide CSS-ready examples?

Yes. Each suggestion includes copy-paste CSS variables or font-face links and a recommended size/weight scale for headings, subheads, body, and captions.