Typography system generator for web projects using Google Fonts. Searches 1,923 fonts enriched with typographic personality tags (geometric, humanist, neo-grotesque, etc.), contrast levels, and body-suitability ratings. Generates complete typographic rhythm systems.
Data Files
data/fonts.csv— 1,923 Google Fonts with: Family, Category, Stroke, Personality, Expressive, Contrast, Width, Styles, Weight_Range, Variable, Variable_Axes, Body_Suitable, Quality_Tier (A/B/C), Popularity_Rank, Mood, Best_For, Keywords, Subsets, Google_Fonts_URL, CSS_Importdata/pairings.csv— 73 proven font pairings with contrast type and scale recommendationsdata/scales.csv— 8 modular type scales with sizes, line-heights, letter-spacing, marginsreferences/typographic-rhythm.md— Scale math, line-height tiers, spacing rulesreferences/pairing-principles.md— Contrast theory, decision trees, superfamilies
Modes
MCP note: If the google-fonts MCP server is connected, prefer its tools —
search_fonts, generate_typography_system, lookup_font, list_scales, list_pairings —
over the scripts below. The scripts are the fallback for skill-only installs.
Single Font (Strict)
One font for headings AND body. Must have weight range covering 400+700. Body-suitable required.
python3 scripts/search.py "modern clean SaaS" --mode single
python3 scripts/search.py "geometric professional" --mode single --tier A
Font Pair (Contrast)
Two fonts with typographic contrast. Searches proven pairings first.
python3 scripts/search.py "elegant editorial luxury" --mode pair
python3 scripts/search.py "tech startup bold" --mode pair
Lookup & Scale
python3 scripts/search.py "Inter" --mode lookup # full metadata for a named font
python3 scripts/search.py "marketing bold" --mode scale # search type scales
Full System Output
Generate CSS + Tailwind + embed link from font selection + scale choice.
# Single font
python3 scripts/generate-css.py --font "Inter" --scale major-third --format all
# Font pair
python3 scripts/generate-css.py --heading "Playfair Display" --body "Inter" \
--scale perfect-fourth --format all
# Custom weights and base size
python3 scripts/generate-css.py --heading "Space Grotesk" --body "DM Sans" \
--heading-weights "400;700" --body-weights "300;400;500;700" \
--scale minor-third --base 16 --format css
Workflow
- Understand context — Ask: product type, mood, content density, existing brand
- Search fonts — Run search.py with relevant keywords and mode
- Present top 3 — Show Family, Personality, Contrast, Quality Tier, Weight Range
- Generate system — Run generate-css.py with chosen font(s) and appropriate scale
- Deliver — Provide CSS custom properties, Tailwind config, and embed link
Quick Decision Guide
| Project Type | Mode | Scale | Suggested Search |
|---|---|---|---|
| SaaS / Dashboard | single | major-second | "clean professional geometric" |
| Blog / Content | pair | major-third | "editorial readable" |
| Marketing / Landing | pair | perfect-fourth | "bold modern confident" |
| Luxury / Fashion | pair | augmented-fourth | "elegant premium serif" |
| Documentation | single | minor-third | "readable accessible humanist" |
| E-commerce | pair | minor-third | "clean friendly conversion" |
| Portfolio | pair | perfect-fourth | "creative distinctive" |
| Enterprise / Gov | single | major-second | "trustworthy accessible corporate" |
Scale Reference
| Scale | Ratio | Best For |
|---|---|---|
| minor-second | 1.067 | Dense UI, dashboards |
| major-second | 1.125 | Apps, admin panels |
| minor-third | 1.2 | General purpose |
| major-third | 1.25 | Blogs, content |
| perfect-fourth | 1.333 | Marketing, editorial |
| augmented-fourth | 1.414 | Magazines, expressive |
| perfect-fifth | 1.5 | Display-heavy |
| golden-ratio | 1.618 | Hero sections |
Pairing Contrast Types
- Structure: Serif + Sans (safest, most contrast)
- Proportion: Geometric sans + Humanist sans (subtle, modern)
- Era: Old-style serif + Neo-grotesque sans (dramatic)
- Weight: Single font family, different weights (simplest)
Quality Rules
- Always use
display=swapin Google Fonts embed - Prefer variable fonts (fewer HTTP requests, full weight flexibility)
- Never suggest a single-weight font for body text
- Verify Weight_Range covers needed weights before suggesting
- For body text: only suggest Body_Suitable=="Yes" fonts
- Tier A fonts first, then B, then C
- Include
preconnecthints for fonts.googleapis.com and fonts.gstatic.com - Max 3 font families per project (heading + body + optional mono)
- css2 URLs separate weights with semicolons (
wght@400;700), ranges with..(wght@100..900); commas are normalized, while malformed axes and dash ranges are rejected
Output Includes
- CSS custom properties: font families, sizes, line-heights, letter-spacing, measure
- Tailwind config: fontFamily, fontSize with lineHeight and letterSpacing
- Google Fonts
<link>embed with preconnect - Responsive breakpoint guidance
Showcase Gallery
100 pre-made typography systems applied to fictional projects. Browse at showcase/index.html
or reference showcase/showcase.json for programmatic access.
When a user says "show me examples", "pick a style for me", or "what would work for a SaaS app",
read showcase/showcase.json and filter by project type to suggest a pre-built system.
Regenerating
python3 scripts/generate-showcase.py
For detailed typographic theory, read references/typographic-rhythm.md.
For pairing decision trees, read references/pairing-principles.md.