Web typography skill for Claude: pick, pair and implement fonts for the web

Makes Claude choose, pair and set up web typefaces, then score the result against a 10-point readability and performance check.

Installs: 9.4K; on skills.sh
Stars: 2.6K; on GitHub
Files: 5; besides SKILL.md
Updated: Sep 2026; last repo commit

SKILL.md is a practical guide that follows seven topics: how people read, evaluating typefaces, choosing them, pairing them, measurements, type hierarchy, and responsive typography with web font performance. Five reference files go deeper on anatomy, evaluation, pairing, responsive type and CSS.

Claude scores your implementation out of 10 using the Quick Diagnostic table, and names the rows that fail. SKILL.md lists the book On Web Typography by Jason Santa Maria as further reading. The skill bundles no scripts.

Good for

Front-end developers choosing fonts and writing type CSS
Designers pairing typefaces and building a type scale
Teams fixing slow font loading or hard-to-read text

Install web-typography

Claude Code

Copy this prompt.

Install the web-typography skill in Claude Code. Run this command:

/plugin marketplace add wondelai/skills
/plugin install ux-design@wondelai-skills

Then check that it loaded and tell me how to use it.

2
Paste it into Claude Code. It shows the change and asks before running it.

Pick one route. The plugin route installs the ux-design plugin: 11 skills (refactoring-ui, ios-hig-design, ux-heuristics, hooked-ux, improve-retention, web-typography, top-design, design-everyday-things, lean-ux, microinteractions, steve-jobs-design-review), listed in marketplace.json. The skills CLI route installs just this skill. SKILL.md mentions refactoring-ui and top-design as optional neighbours; this skill works without them.

From the project README. Source.

What's in the skill

When it loads

Select, pair, and implement typefaces for web projects. Use when the user mentions "font pairing", "which typeface", "line height", "responsive typography", "web font loading", "type hierarchy", "variable fonts", "FOUT/FOIT", "typographic scale", or "the text is hard to read". Also trigger when choosing between system fonts and web fonts, optimizing font-loading performance, or designing readable long-form content. Covers readability evaluation, CSS implementation, and performance optimization. For overall UI design systems, see refactoring-ui. For dramatic typographic experiences, see top-design.

Sections in SKILL.md

Core Principle
Scoring
Two Contexts for Type
Typography Framework
1. How We Read
2. Evaluating Typefaces
3. Choosing Typefaces
4. Pairing Typefaces
5. Typographic Measurements
6. Building Type Hierarchies
7. Responsive Typography and Web Font Performance
Common Mistakes
Quick Diagnostic
Further Reading
About the Author

Key facts

Author: wondelai (named in SKILL.md metadata)
License: MIT
Installs on skills.sh: 9,412 (Nov 2, 2026)
GitHub stars: 2,552 for the whole wondelai/skills repo (Nov 2, 2026)
Last repo commit: Sep 10, 2026
Audits on skills.sh: Gen Agent Trust Hub: pass, Socket: pass, Snyk: pass
What it includes: 6 files including SKILL.md: 5 reference files (no scripts)
Further reading: On Web Typography by Jason Santa Maria (A Book Apart, 2014), listed in SKILL.md
Part of: The ux-design plugin: 11 skills per marketplace.json
Version: 1.5.0 (SKILL.md metadata)

What it includes

10 diagnostic rows, bands 9-10, 5-6 and 3 or less
Score is the number of Quick Diagnostic rows the implementation satisfies. Claude states the score and the failing rows.
Try: “Audit the typography on this page and give it a score.”
Read · Scoring
Reading mechanics and line length
Covers saccades, fixations, word shapes and legibility versus readability, with a prose CSS sample (18px, line-height 1.6, 65ch).
Read · 1. How we read
Quality checks, then choose by purpose
Technical and structural checks, real-content testing, and a reminder to verify the web license before shipping a font.
Try: “Which typeface should I use for a long-form documentation site?”
Read · 2 and 3. Evaluate and choose typefaces
Contrast between families
Guidance on pairing, backed by references/pairing-strategies.md.
Read · 4. Pairing typefaces
Sizes, spacing, scale and levels
Covers measures, line height and type hierarchy.
Read · 5 and 6. Measurements and hierarchy
Responsive CSS, font loading and payload
Covers responsive typography, font-display, subsetting and variable fonts, with a 200KB payload target in the diagnostic.
Read · 7. Responsive type and font performance
9 problems with cause and fix
For example cramped text, lines over 75 characters, disconnected headings, slow font loading and lorem ipsum testing.
Read · Common Mistakes
5 deeper guides loaded on demand
typeface-anatomy, evaluating-typefaces, pairing-strategies, responsive-typography and css-implementation.
Files · Reference files

From the official docs

Permissions

Low risk

What it can do

Read your data
Create and change things
Delete things
Read-only mode

Watch out for

It can change your CSS when asked to implement
The description covers implementing typography as well as choosing it. Commit first and review the diff for font and layout changes. github.com

Security advisories

No published security advisories as of Nov 2, 2026.

Technical details

Turning on read-only	No read-only mode. Ask for advice only if you do not want edits.
Sign-in and keys	No key or account.
Scopes	Gives CSS and font-loading guidance, so Claude may edit your stylesheets or font setup when you ask it to implement a change

Questions

What does the web-typography skill do?

It makes Claude help you choose, pair and implement typefaces for the web: readable line lengths, type hierarchy, responsive sizes, CSS and font loading. It scores the result out of 10 against a diagnostic table.

How do I install it?

Use the install box at the top of this page. The plugin tab installs the ux-design collection of 11 skills; the skills CLI tab installs only this one.

What does the 10-point score check?

Body text of 16px or more, lines under 75 characters, line height of 1.4 or more, clear contrast between levels, testing at real sizes, a font payload under 200KB, fallback fonts, 200% zoom, no orphaned heading words and distinct links.

Does it cover a book?

SKILL.md lists On Web Typography by Jason Santa Maria (A Book Apart, 2014) under further reading and describes the author. It is a separate guide published in wondelai/skills.

How is it different from refactoring-ui?

SKILL.md says refactoring-ui is for overall UI design systems and top-design is for dramatic typographic experiences. This skill covers selecting, pairing and implementing typefaces for readability and performance. See the refactoring-ui page.

Is it safe?

The folder holds Markdown files and no scripts. If you ask Claude to implement the advice it may edit your CSS, so commit first and review the diff.

Information

updated Nov 2, 2026

Repository: wondelai/skills
Folder: web-typography

wondelai/skills skills.sh

Sources

Docs, issue trackers and discussions this page is built from.

Show all 3

web-typography SKILL.md · github.com
wondelai/skills README · github.com
wondelai-skills marketplace.json · github.com