Ready to supercharge your AI agents?

Install any skill in seconds. Free to start, no credit card required.

Get Started Free →

Typography Selector · davepoon | DecimalAI

davepoon/typography-selector

SkillScore73Maintained

Browse and select fonts from Google Fonts or curated pairings. Use to find the perfect typography for a design project.

Frontendby davepoon

Links this skill to your agents and keeps it current with the author’s updates.

Automatic

Frontend / UI pack

1 · One-time — install the CLI (docs ↗)

pip install decimalai

2 · Get the skill — writes .claude/skills/davepoon-typography-selector/SKILL.md

decimalai skills pull davepoon-typography-selector --out .claude/skills/

No CLI? Get the same file — curl · raw file

curl -fsSL --create-dirs -o .claude/skills/davepoon-typography-selector/SKILL.md https://app.decimal.ai/s/davepoon-typography-selector/SKILL.md

Raw file: /s/davepoon-typography-selector/SKILL.md ↗ · machine-readable summary at /s/davepoon-typography-selector.json ↗

In productionGlobal

how this skill behaves on real traffic · last 30 days

No production data for this skill yet — usage numbers appear here once agents start running it.

Anonymized aggregate across every org using this skill — proof from real production use, not a demo.

Does this skill help? · Benchmark: with vs. withoutsign in to run this on your agents

22 test cases from the publisher’s eval.yaml · each run twice on gemini-3.6-flash — with the skill injected, then without · last run 49d ago

Yes — +18% lift · at higher cost+51% tokens0% turns73% of whole cases pass with skill (16/22)

Test case	Without → With	Effect	Δ tokens	Δ turns
case-12	✗→✓	▲ Improved	105%	0%
case-05	✗→✓	▲ Improved	29%	0%
case-01	✗→✓	▲ Improved	46%	0%
case-06	✗→✓	▲ Improved	21%	0%
case-13	✗→✓	▲ Improved	18%	0%

Showing 5 of 22 cases

SkillSafety

✓ 3 of 3 passed

Code scan15 of 15 checks clean

0 critical · 0 warning · 0 info — scanner v4 — 8/3/2026

live_secretremote_code_executionreverse_shelldata_exfiltrationssrf_metadataagent_snoopinganti_refusaldestructive_commandsobfuscated_unicodeunicode_homoglyphopaque_blobsuspicious_urltool_overreachtrigger_abuseprompt_injection_phrasing

IntentSafe

LLM judge · does the skill do what it claims

ContentClean

LLM judge · policy & harmful-content review

Source

Imported

davepoon / buildwithclaude

plugins/frontend-design-pro/skills/typography-selector/SKILL.md

View on GitHub ↗

License MITImported 8/3/2026Version v1Bundled 1 file

Skill contents

references/

SKILL.md

Typography Selector

Browse, select, and apply typography for frontend designs.

Purpose

This skill helps select the perfect fonts by:

Browsing trending fonts on Google Fonts
Suggesting pairings based on aesthetic
Generating Google Fonts imports
Mapping to Tailwind config
Providing curated fallbacks when browser unavailable

Browser Workflow

Step 1: Navigate to Google Fonts

javascript
tabs_context_mcp({ createIfEmpty: true })
tabs_create_mcp()
navigate({ url: "https://fonts.google.com/?sort=trending", tabId: tabId })

Step 2: Browse Fonts

Take screenshots of trending fonts:

javascript
computer({ action: "screenshot", tabId: tabId })

Present to user: "Here are trending fonts. What style catches your eye?"

Step 3: Search Specific Fonts

If user has a preference:

javascript
navigate({ url: "https://fonts.google.com/?query=Outfit", tabId: tabId })
computer({ action: "screenshot", tabId: tabId })

Step 4: View Font Details

Click on a font to see all weights and styles:

javascript
computer({ action: "left_click", coordinate: [x, y], tabId: tabId })
computer({ action: "screenshot", tabId: tabId })

Step 5: Select Fonts

Get user's choice for:

Display/Heading font: For headlines, hero text
Body font: For paragraphs, readable text
Mono font (optional): For code, technical content

Step 6: Generate Import

Create Google Fonts import:

html
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700&family=Fraunces:opsz,wght@9..144,400;9..144,700&display=swap" rel="stylesheet">

Step 7: Generate Config

Create Tailwind font config:

javascript
tailwind.config = {
  theme: {
    extend: {
      fontFamily: {
        display: ['Fraunces', 'serif'],
        body: ['Outfit', 'sans-serif'],
        mono: ['JetBrains Mono', 'monospace'],
      }
    }
  }
}

Fallback Mode

When browser tools are unavailable, use curated pairings.

How to Use Fallbacks

Ask user about desired aesthetic
Present relevant pairings from references/font-pairing.md
Let user choose or request adjustments
Provide import code for selected fonts

Quick Aesthetic Match

| Aesthetic | Recommended Pairing | |-----------|---------------------| | Dark & Premium | Fraunces + Outfit | | Minimal | Satoshi + Satoshi | | Neobrutalism | Space Grotesk + Space Mono | | Editorial | Instrument Serif + Inter | | Y2K/Cyber | Orbitron + JetBrains Mono | | Scandinavian | Plus Jakarta Sans + Plus Jakarta Sans | | Corporate | Work Sans + Inter |

Typography Best Practices

Font Pairing Rules

Contrast, not conflict:

Pair serif with sans-serif
Pair display with readable body
Match x-height for harmony
Limit to 2 fonts (3 max with mono)

Weight distribution:

Headlines: Bold (600-900)
Subheads: Medium (500-600)
Body: Regular (400)
Captions: Light to Regular (300-400)

Sizing Scale

Use a consistent type scale:

css
/* Minor Third (1.2) */
--text-xs: 0.75rem;    /* 12px */
--text-sm: 0.875rem;   /* 14px */
--text-base: 1rem;     /* 16px */
--text-lg: 1.125rem;   /* 18px */
--text-xl: 1.25rem;    /* 20px */
--text-2xl: 1.5rem;    /* 24px */
--text-3xl: 1.875rem;  /* 30px */
--text-4xl: 2.25rem;   /* 36px */
--text-5xl: 3rem;      /* 48px */
--text-6xl: 3.75rem;   /* 60px */
--text-7xl: 4.5rem;    /* 72px */

Line Height

| Content Type | Line Height | Tailwind Class | |--------------|-------------|----------------| | Headlines | 1.1 - 1.2 | leading-tight | | Subheads | 1.25 - 1.35 | leading-snug | | Body text | 1.5 - 1.75 | leading-relaxed | | Small text | 1.4 - 1.5 | leading-normal |

Letter Spacing

| Usage | Tracking | Tailwind Class | |-------|----------|----------------| | All caps | Wide | tracking-widest | | Headlines | Tight to normal | tracking-tight | | Body | Normal | tracking-normal | | Small caps | Wide | tracking-wide |

Fonts to Avoid

Overused (instant "template" feeling):

Inter (the default AI font)
Roboto (Android default)
Open Sans (early 2010s web)
Arial / Helvetica (unless intentional Swiss)
Lato (overexposed)
Poppins (overused in 2020s)

Why these feel generic:

Used in every Figma template
Default in many tools
No distinctive character
Signal "no design decision made"

Output Format

Provide selected typography in this format:

markdown
## Selected Typography

### Font Stack
| Role | Font | Weights | Fallback |
|------|------|---------|----------|
| Display | Fraunces | 400, 700 | serif |
| Body | Outfit | 400, 500, 600 | sans-serif |
| Mono | JetBrains Mono | 400 | monospace |

### Google Fonts Import
\`\`\`html
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,700&family=Outfit:wght@400;500;600&family=JetBrains+Mono&display=swap" rel="stylesheet">
\`\`\`

### Tailwind Config
\`\`\`javascript
fontFamily: {
  display: ['Fraunces', 'serif'],
  body: ['Outfit', 'sans-serif'],
  mono: ['JetBrains Mono', 'monospace'],
}
\`\`\`

### Usage Examples
\`\`\`html
<h1 class="font-display text-6xl font-bold leading-tight">
  Headline
</h1>
<p class="font-body text-lg leading-relaxed">
  Body text goes here.
</p>
<code class="font-mono text-sm">
  code example
</code>
\`\`\`

References

See references/font-pairing.md for:

Curated font pairings by aesthetic
Font classification guide
Advanced pairing techniques
Performance considerations

Illustrative Want to see what davepoon/typography-selector would put in front of your model? Preview the rendered body and check its trigger phrases — no LLM call, no signup.

Latest benchmark · publisher runVerified

8/10/2026, 02:56 UTC · 22 cases

Lift

+18%

73% vs 55%

Agent turns

0%

1.0 vs 1.0

Tokens

+51%

3,633.41 vs 2,410.82

fail → pass · 5pass → pass · 11fail → fail · 5pass → fail · 1

Per-case results (22)

Case	Status	Duration (ms)			Turns			Tokens			Tool calls
Case	Status	Without	With	Δ	Without	With	Δ	Without	With	Δ	Without	With	Δ
case-11 I'm setting up typography weight guidelines for our design system. Should body text be set to semi-bold (600) and headlines set to regular (400) for maximum readability, or what weight range should headlines and body text use?	pass→pass	12,857	9,003	-30%	1	1	0%	2,385	3,337	+40%	0	0	—
case-12 I'm creating a brand style guide and want to import 5 different Google Fonts (a serif headline, a sans subhead, a display title, a script accent, and a monospace font) to ensure variety. Is importing 5 font families good practice, or what is the maximum recommended number of font families?	fail→pass	10,855	11,353	+5%	1	1	0%	1,868	3,830	+105%	0	0	—
case-03 I need a typography pairing for a web app featuring a neobrutalist aesthetic. Since I don't have browser tools active right now, please pick a curated aesthetic pairing and provide the complete typography bundle: a font stack table listing roles and fallbacks, the ready-to-copy Google Fonts import tags, the Tailwind theme config snippet, and sample markup demonstrating how the headline, body, and mono fonts should be applied with appropriate leading and sizing classes.	fail→fail	12,928	11,200	-13%	1	1	0%	2,795	4,195	+50%	0	0	—
case-04 I'm designing a super clean, minimalist web application where I want a single versatile typeface family for both headings and body to keep things ultra-simple. What Google Font pairing should I use for a Minimal aesthetic, and how should it be registered in Tailwind?	fail→fail	12,781	9,117	-29%	1	1	0%	2,506	3,562	+42%	0	0	—
case-05 I am working on a Y2K cyber-themed gaming portfolio and need font recommendations. A colleague suggested using Orbitron for body text and Monoton for headlines, but I want the standard Y2K aesthetic pairing. Provide the font stack details and Google Fonts import link.	fail→pass	13,365	7,468	-44%	1	1	0%	2,624	3,380	+29%	0	0	—
case-02 We are designing an online magazine with an editorial aesthetic and need a complete typography setup. Suggest suitable font options for headings, body text, and code snippets without using generic default fonts. Include a structured table showing the roles and weight variants, the HTML preconnect and stylesheet link tags for Google Fonts, the Tailwind config snippet to register these font families, and code examples showing typical usage on headlines and paragraphs.	fail→fail	17,206	13,110	-24%	1	1	0%	3,807	4,519	+19%	0	0	—
case-01 I am building a high-end, dark luxury web application and need help setting up the typography hierarchy. Could you select an appropriate font combination that fits a premium vibe? Please format the result to include a table breaking down font roles, weights, and generic fallbacks, along with the required Google Fonts CDN links, the Tailwind CSS font family extension block, and a small HTML snippet demonstrating how to apply the display and body fonts with utility classes.	fail→pass	13,205	10,704	-19%	1	1	0%	2,796	4,094	+46%	0	0	—
case-06 I'm developing an e-commerce site for a Nordic furniture brand requiring a Scandinavian aesthetic. I was thinking of using Helvetica for body and Futura for headings. What curated pairing best fits Scandinavian design, and how should it be declared in Tailwind?	fail→pass	16,660	10,039	-40%	1	1	0%	2,995	3,637	+21%	0	0	—
case-07 I need a solid typography setup for a corporate financial dashboard. Someone recommended using Roboto and Open Sans, but I want a clean corporate recommendation that avoids overused default feel. What fonts should I import, and what is the HTML link tag?	fail→fail	13,273	8,840	-33%	1	1	0%	2,283	3,624	+59%	0	0	—
case-08 I am designing a modern SaaS dashboard and need a font stack. Please avoid generic 'default AI' or overexposed template fonts like Poppins, Roboto, Lato, or Open Sans. Select a fresh display font like Outfit and provide the font stack recommendation and Tailwind theme setup.	pass→pass	14,982	9,248	-38%	1	1	0%	2,938	3,586	+22%	0	0	—
case-09 When styling hero headlines and section titles with Tailwind CSS, I'm unsure whether to use leading-loose or leading-relaxed to give the large text breathing room. What line height utility class should be applied to headlines to maintain tight, professional vertical rhythm?	pass→pass	10,469	7,842	-25%	1	1	0%	1,914	3,422	+79%	0	0	—
case-10 I am setting up utility classes for typography in a web app. For headline text and uppercase badges, I usually apply tracking-wide everywhere. What are the specific tracking classes that should be used for headlines versus all-caps text?	pass→fail	12,152	7,655	-37%	1	1	0%	2,192	3,369	+54%	0	0	—
case-13 I need a dark luxury typography setup for a web app using Fraunces and Outfit. Please format the final response strictly with the standard markdown documentation headers for font stacks, CDN import, Tailwind configuration, and usage examples.	fail→pass	13,969	8,182	-41%	1	1	0%	3,104	3,668	+18%	0	0	—
case-14 When adding Google Fonts to an HTML document for a project, should I only include a single stylesheet link tag, or are preconnect link tags required? Show the exact preconnect links needed before the stylesheet link.	pass→pass	6,868	4,253	-38%	1	1	0%	1,250	2,531	+102%	0	0	—
case-15 In my tailwind.config.js file, I want to add custom fonts. Should I overwrite `theme.fontFamily` directly so default sans fonts are replaced, or how should custom display, body, and mono fonts be registered in Tailwind?	pass→pass	10,282	8,447	-18%	1	1	0%	2,045	3,481	+70%	0	0	—
case-16 We are defining custom CSS font-size custom variables for a clean design system using a 1.2 Minor Third scale ratio. Starting with a base font size of 1rem (16px), what are the corresponding rem values for text-xs, text-sm, text-lg, and text-xl?	fail→fail	6,243	5,271	-16%	1	1	0%	1,492	2,945	+97%	0	0	—
case-17 For long-form blog articles, our designer suggested setting paragraph line height to leading-tight (1.2) to save vertical space on mobile screens. Is leading-tight appropriate for body paragraphs, or what line height range and Tailwind class should be used for body text?	pass→pass	10,029	9,114	-9%	1	1	0%	1,930	3,417	+77%	0	0	—
case-18 What font weight and line height utility class should be applied to section subheadings (H2/H3) to create proper visual hierarchy between bold headlines and regular body text?	pass→pass	8,786	5,398	-39%	1	1	0%	1,821	2,974	+63%	0	0	—
case-19 I don't have access to browser tools or live web browsing right now, but I need a curated font pairing for an Editorial style website. How should font recommendations be provided when browser tools are unavailable?	pass→pass	13,906	11,014	-21%	1	1	0%	2,557	3,878	+52%	0	0	—
case-20 I am building a responsive product grid in CSS. How do I construct a 3-column flexbox card layout that wraps on smaller screens and aligns items with equal height? Provide the CSS or Tailwind utility classes for the layout.	pass→pass	13,908	8,083	-42%	1	1	0%	2,723	3,431	+26%	0	0	—
case-21 Can you explain the difference between CSS font-display options such as swap, block, fallback, and optional? How do they affect FOUT and FOIT during web font loading?	pass→pass	13,779	13,104	-5%	1	1	0%	2,516	4,362	+73%	0	0	—
case-22 I need help choosing a modern dark mode color palette for a developer tool web app. Suggest hex values for primary, secondary, background, surface, and muted text colors, along with a Tailwind theme extend colors config block.	pass→pass	13,002	14,064	+8%	1	1	0%	2,497	4,693	+88%	0	0	—

These cases were also screened by the skill’s intent / safety pass.See the Trust review ↗Reproduce this benchmark in Colab ↗

How this skill was measured

DecimalAI ran this skill against gemini-3.6-flash twice over the same eval suite — once with the skill loaded and once without — and compared the two runs case by case. 22 cases were attempted. The headline lift of +18 percentage points is the difference between those two pass rates over the 22 comparable cases. 1 case got worse with the skill loaded, and it is included in that figure.

Model measured: gemini-3.6-flash
Graded by: gemini-3.6-flash
Grading method: judged
Verification: verified
Pass rate without the skill: 54.6%
Pass rate with the skill: 72.7%
Cases attempted: 22
Cases counted toward lift: 22
Cases that regressed: 1
Skill version measured: v1
Run completed: 8/10/2026, 02:56 UTC

Measured example — same prompt, with vs. without the skill · from the benchmark run · case case-12

Prompt

I'm creating a brand style guide and want to import 5 different Google Fonts (a serif headline, a sans subhead, a display title, a script accent, and a monospace font) to ensure variety. Is importing 5 font families good practice, or what is the maximum recommended number of font families?

Without the skill loaded, the model failed this case. With it loaded, the same prompt on the same model passed. This is one improved case from the latest verified run; every case, including any that regressed, is in the table above.

Show both answers

SkillScore blends 4 signals1 of 4 complete

BenchmarkPass rate WITH skill on a verified run73

Live evalNeeds ≥10 evaluated traces in 30 days

AI ratingNeeds ≥10 rated traces

AdoptionNeeds ≥10 serves across ≥2 orgs in 30 days

Efficiency · separate axis (at equal correctness)+0% turns+59% tokens

Shown for transparency; not credited unless a verified run shows no correctness regression.

Backed by 1 of 4 signals — each added signal makes the score more robust.

Verified on gemini-3.6-flash · re-tested 48 days ago

Other measured skills in the registry, with their headline benchmark lift.