Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →wondelai/web-typography
Select, pair, and implement typefaces for web projects.
Passed 22 of 22 test cases with the skill, and 20 of 22 without it.
2 fixed20 passed either way0 still failing0 broke
Tokens, turns and time describe resource use, not a dollar price.
One of 2 test cases the skill fixed. Same model, same prompt, with and without the skill.
Our team is working on a digital documentation portal and we need assistance with typeface selection and CSS layout. Evaluate our current typography settings against your scoring guide, stating the numerical score and highlighting any diagnostic checks that failed, then provide recommended typeface pairing options and improved CSS rules.
| Checked | Without skill | With skill |
|---|---|---|
| Reports a numerical score out of 10 based on the 10 Quick Diagnostic checks. | Missed | Passed |
| Explicitly names failing diagnostic rows among the 10 diagnostic checks. | Missed | Passed |
| Recommends font pairings using workhorse typefaces such as Inter, Georgia, IBM Plex, or Source Sans. | Passed | Passed |
The instructions your model reads when the skill loads.
A practical guide to choosing, pairing, and implementing typefaces for the web. The best typography is invisible — it immerses readers in content rather than calling attention to itself.
Typography is the voice of your content. The typeface you choose sets tone before a single word is read — a legal site shouldn't feel playful; a children's app shouldn't feel corporate. Follow the "clear goblet" principle: typography should be like a crystal-clear wine glass, keeping focus on the wine (content), not the glass (type).
Goal: 10/10. Score = number of the 10 Quick Diagnostic rows the implementation satisfies. Bands: 9-10 = body 16px+, measure under 75ch, line-height 1.4+, clear level contrast, font payload under 200KB, fallbacks set, survives 200% zoom; 5-6 = readable but missing measure control, fallbacks, or zoom resilience; <=3 = sub-16px body, no measure cap, FOIT, or unreadable hierarchy. Always state the current score and the specific diagnostic rows failing.
All typography falls into two categories:
| Context | Purpose | Priorities |
|---|---|---|
| Type for a moment | Headlines, buttons, navigation, logos | Personality, impact, distinctiveness |
| Type to live with | Body text, articles, documentation | Readability, comfort, endurance |
Workhorse typefaces excel at "type to live with" — versatile across sizes, weights, and contexts without drawing attention. Examples: Georgia, Source Sans, Freight Text, FF Meta.
Core concept: Understanding reading mechanics is the foundation for every typography decision. Eyes don't scan smoothly — they jump in bursts.
Why it works: Fighting these mechanics creates friction that drives readers away; aligning with them lets readers absorb content faster with less fatigue.
Key insights:
Product applications:
| Context | Application | Example |
test cases passed, vs 20 / 22 without
More skills from the same source and nearby in the registry, with their headline benchmark lift.