web-typography▌
wondelai/skills · updated May 16, 2026
MDX-style export adds YAML metadata + attribution linking explainx.ai and this canonical listing URL.
Select, pair, and implement typefaces for web projects with readability and performance as core priorities.
- ›Covers seven core areas: reading mechanics and how eyes process text, evaluating typefaces for screen rendering, choosing faces by purpose rather than aesthetics, pairing strategies for clear contrast, optimal measurements (font size, line length, line height), building visual hierarchies, and responsive typography with efficient font loading
- ›Emphasizes the \"clear goblet\" princi
Web Typography
A practical guide to choosing, pairing, and implementing typefaces for the web. Typography serves communication — the best typography is invisible, immersing readers in content rather than calling attention to itself.
Core Principle
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.
The "clear goblet" principle: Typography should be like a crystal-clear wine glass — the focus is on the wine (content), not the glass (type). Readers should absorb meaning, not notice letterforms.
Readers don't read, they scan. Eyes jump 7-9 characters at a time (saccades), pausing briefly (fixations). Good typography supports this natural pattern.
Scoring
Goal: 10/10. When reviewing or creating typography implementations, rate them 0-10 based on adherence to the principles below. A 10/10 means full alignment with all guidelines; lower scores indicate gaps to address. Always provide the current score and specific improvements needed to reach 10/10.
Two Contexts for Type
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" — they're versatile across sizes, weights, and contexts without drawing attention to themselves. Examples: Georgia, Source Sans, Freight Text, FF Meta.
Typography Framework
1. How We Read
Core concept: Understanding reading mechanics is the foundation for every typography decision. Eyes don't scan smoothly — they jump in bursts, and good typography supports this natural pattern.
Why it works: When typography aligns with how the brain processes text — through word shape recognition, consistent rhythm, and clear letterform distinction — readers absorb content faster with less fatigue. Fighting these mechanics creates friction that drives readers away.
Key insights:
- Saccades — eyes jump in 7-9 character bursts, not smooth scanning. Line length and letter spacing directly affect saccade efficiency
- Fixation points — eyes pause briefly to absorb content. Dense or poorly spaced text increases fixation duration and slows reading
- Word shapes (bouma) — experienced readers recognize word silhouettes, not individual letters. Maintaining distinct boumas aids recognition speed
- Legibility vs. readability — legibility is whether individual characters can be distinguished (a typeface concern); readability is whether text can be comfortably read for extended periods (a typography concern — size, spacing, line length). A typeface can be legible but poorly set, making it unreadable
Product applications:
| Context | Application | Example |
|---|---|---|
| Long-form content | Optimize for sustained reading comfort | 16-18px body text, 1.5-1.7 line height, 45-75 char lines |
| Dashboard UI | Optimize for rapid scanning | Distinct weight hierarchy, ample whitespace between data groups |
| Mobile reading | Account for variable distance and lighting | Slightly larger body size (17-18px), higher contrast |
| Documentation | Support both scanning and deep reading | Clear heading hierarchy with generous paragraph spacing |
| E-commerce | Enable quick product comparison | Consistent number formatting, tabular figures |
| Accessibility | Support readers with varying abilities | High contrast, generous spacing, distinct letterforms |
Copy patterns:
/* Optimal reading rhythm for body text */
.prose {
font-size: 1.125rem; /* 18px */
line-height: 1.6;
max-width: 65ch; /* ~45-75 characters */
letter-spacing: normal; /* Don't force tracking on body text */
}
Ethical boundary: Typography decisions should always prioritize reader comprehension and comfort over visual novelty. Sacrificing readability for aesthetic effect excludes readers and undermines the content's purpose.
See: references/typeface-anatomy.md for terminology, letterform parts, and classification systems.
2. Evaluating Typefaces
Core concept: A typeface must pass technical, structural, and practical quality checks before it earns a place in a project. Beautiful specimens fail on screen; rigorous evaluation prevents costly mid-project typeface swaps.
Why it works: Screen rendering, variable bandwidth, and diverse devices impose constraints that print never faced. A typeface that passes structural assessment (consistent strokes, open counters, distinct letterforms) and practical assessment (file size, license, rendering) will perform reliably across the full range of real-world conditions.
Key insights:
- Technical quality — consistent stroke weights, even color (visual density) across text blocks, good kerning pairs (AV, To, Ty), complete character set (accents, punctuation, figures), and multiple weights (at minimum: regular, bold, italic)
- Structural assessment — adequate x-height (larger = better screen readability), open counters and apertures (a, e, c shapes), distinct letterforms (Il1, O0, rn vs. m), and appropriate contrast (thick/thin stroke variation)
- Practical needs — works at intended sizes (test at actual use size), renders well on target screens and browsers, acceptable file size for web loading, and appropriate license for the project
- Real content testing — always test with real content, not Lorem ipsum. Dummy text hides problems with character frequency, word length, and paragraph rhythm
Product applications:
| Context | Application | Example |
|---|---|---|
| Body text selection | Prioritize x-height, open counters, even color | Source Serif Pro over Didot for long reads |
| Headline selection | Prioritize personality and distinctiveness at large sizes | Playfair Display for editorial impact |
| UI/System text | Prioritize legibility at small sizes and weight range | Inter or SF Pro for interface elements |
| Multilingual product | Verify complete glyph coverage for target languages | Noto Sans for broad Unicode support |
| Performance-critical site | Evaluate file size and subsetting options | Variable font single file vs. multiple static weights |
| Brand refresh | Assess whether typeface conveys intended personality | Compare specimen at actual use sizes against brand attributes |
Copy patterns:
/* Test typeface at actual use sizes */
body { font-size: 16px; } /* Minimum body size */
.caption { font-size: 0.75rem; } /* Stress-test small sizes */
h1 { font-size: 3rem; } /* Check large-size character */
/* Verify rendering with font-smoothing */
body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
Ethical boundary: Always verify typeface licensing before implementation. Using unlicensed fonts exposes projects to legal risk and undermines the type design community that creates these tools.
See: references/evaluating-typefaces.md for detailed quality assessment criteria and structural analysis.
3. Choosing Typefaces
Core concept: Start with purpose, not aesthetics. The content's tone, reading context, duration, and personality should drive typeface selection — not personal preference or trend following.
Why it works: When typeface selection is grounded in content requirements, the result feels inevitable rather than arbitrary. Purpose-driven choices also survive stakeholder review better because they can be justified with clear reasoning rather than subjective taste.
Key insights:
- Define the job first — body text, headlines, and UI elements may each need different faces. Clarify the role before browsing specimens
- Match tone to content — a financial report needs different type than a bakery menu. The typeface should feel like a natural voice for the subject matter
- Test at actual sizes — a face beautiful at 72px may be illegible at 14px. Always evaluate at the sizes where the typeface will actually be used
- Check the family — ensure needed weights, italics, and styles exist before committing. Discovering missing weights mid-project forces compromises
- Safe starting points — for body text, Georgia, Source Serif Pro, Charter (serif) and system fonts, Source Sans Pro, Inter, IBM Plex Sans (sans-serif) reliably work across contexts
Product applications:
| Context | Application | Example |
|---|---|---|
| Content-heavy site | Select a workhorse serif or sans for sustained reading | Source Serif Pro or Charter for articles |
| SaaS dashboard | Choose a clean sans with strong tabular figures | Inter or IBM Plex Sans for data-rich interfaces |
| Marketing landing page | Pair a distinctive display face with a readable body face | Playfair Display headlines + Source Sans Pro body |
| Documentation site | Prioritize clarity and weight range for code + prose | IBM Plex Mono for code, IBM Plex Sans for prose |
| Brand-driven product | Commission or license a face that embodies brand values | Custom typeface or carefully chosen match to brand personality |
| Accessibility-focused | Select faces designed for maximum legibility | Atkinson Hyperlegible for vision-impaired users |
Copy patterns:
/* Safe system font stack */
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI',
Roboto, Oxygen, Ubuntu, sans-serif;
}
/* Reliable web font body stack */
body {
font-family: 'Source Sans Pro', -apple-system,
BlinkMacSystemFont, sans-serif;
}
Ethical boundary: Avoid choosing typefaces solely to appear trendy or sophisticated at the expense of readability. Typography that excludes readers with lower vision or reading difficulties in favor of visual style fails its fundamental purpose.
See: references/evaluating-typefaces.md for quality assessment to apply during selection.
4. Pairing Typefaces
Core concept: Successful typeface pairings create clear contrast — faces should be obviously different, not confusingly similar. One to two typefaces maximum; more requires exceptional skill.
Why it works: Contrast between typefaces creates visual hierarchy and rhythm. When two faces are too similar, they create tension without purpose — the reader senses something is "off" without knowing why. Clear structural contrast (serif + sans, light + bold, humanist + geometric) lets each face play a distinct role while coexisting harmoniously.
Key insights:
- Contrast types — structure (serif + sans), weight (light + regular), era (humanist + geometric), and width (condensed + normal) all create effective contrast
- Same designer strategy — faces designed by one person often share DNA that harmonizes (e.g., FF Meta + FF Meta Serif)
- Superfamilies — typeface families designed to work together eliminate guesswork (e.g., Roboto + Roboto Slab)
- Pairing mistakes — two serifs or two sans faces that look almost alike, both faces trying to be distinctive, mixing renaissance and postmodern without intention, one face overwhelming the other in weight
Product applications:
| Context | Application | Example |
|---|---|---|
| Editorial site | Serif headlines + sans body for classic readability | Playfair Display + Source Sans Pro |
| Tech product | Superfamily for guaranteed harmony | Roboto + Roboto Slab |
| Corporate site | Same-designer pairing for subtle cohesion | FF Meta + FF Meta Serif |
| E-commerce | Distinctive display + neutral body | Condensed headline face + system sans-serif body |
| Documentation | Monospace code + sans-serif prose from same family | IBM Plex Mono + IBM Plex Sans |
| Minimal brand | Single family with weight variation | Inter at varying weights and sizes |
Copy patterns:
/* Classic serif + sans-serif pairing */
h1, h2, h3 {
font-family: 'Playfair Display', Georgia, serif;
}
body {
font-family: 'Source Sans Pro', -apple-system, sans-serif;
}
/* Superfamily pairing */
h1, h2, h3 {
font-family: 'Roboto Slab', serif;
}
body {
font-family: 'Roboto', sans-serif;
}
Ethical boundary: When in doubt, use one family with weight variation rather than forcing a pairing. A mismatched pairing creates cognitive friction that undermines the content, and adding complexity without purpose serves the designer's ego rather than the reader's needs.
See: references/pairing-strategies.md for specific combinations, contrast methods, and proven pairings.
5. Typographic Measurements
Core concept: Three measurements — font size, line length, and line height — form the foundation of comfortable reading. Getting these right matters more than typeface choice.
Why it works: These measurements directly govern how the eye tracks across and down text. Optimal line length (45-75 characters) matches the saccade pattern. Adequate line height (1.4-1.8) prevents the eye from jumping to the wrong line on the return sweep. Sufficient font size (16-18px minimum) ensures letterforms are large enough for comfortable recognition on screen.
Key insights:
- Body font size — 16px minimum; err larger (18px) for reading-heavy sites. Mobile users hold phones farther than designers assume
- Line length (measure) — 45-75 characters ideal, 66 characters optimal. Use the
chunit ormax-widthto enforce. Longer lines need more line height to compensate - Line height — 1.4-1.8 for body text. Longer lines need more; shorter lines need less. Headlines need tighter spacing (1.1-1.25)
- Heading scale — use a consistent ratio (1.2-1.5) between heading levels to establish clear hierarchy without extremes
Product applications:
| Context | Application | Example |
|---|---|---|
| Blog / article | Enforce 65ch max-width with 1.6 line height | .prose { max-width: 65ch; line-height: 1.6; } |
| Documentation | Slightly wider measure with increased line height | max-width: 75ch; line-height: 1.7; |
| Mobile UI | Larger body size, auto-constrained measure | font-size: 17px; with viewport-width constraint |
| Dashboard | Tighter line height for dense data display | line-height: 1.3; for table cells and labels |
| Landing page | Generous sizing and spacing for how to use web-typography How to use web-typography on CursorAI-first code editor with Composer 1 PrerequisitesBefore installing skills in Cursor, ensure your development environment meets these requirements:
2 Execute installation commandExecute the skills CLI command in your project's root directory to begin installation: $npx skills add https://github.com/wondelai/skills --skill web-typography The skills CLI fetches 3 Select Cursor when promptedThe CLI will show a list of available agents. Use arrow keys to navigate and space to select Cursor: ◆ Which agents do you want to install to? │ │ ── Universal (.agents/skills) ── always included ──── │ • Amp │ • Antigravity │ • Cline │ • Codex │ ●Cursor(selected) │ • Cursor │ • Windsurf 4 Verify installationConfirm successful installation by checking the skill directory location: .cursor/skills/web-typography Reload or restart Cursor to activate web-typography. Access the skill through slash commands (e.g., ⚠ Security & Verification NoticeWe perform automated surface-level scans (Gen AI Scanner, Socket, Snyk) during installation. These checks detect common vulnerabilities but do not guarantee complete security. Always review skill source code and verify the publisher's reputation before production use. Skills execute code in your development environment. Always verify the publisher's identity, review recent commits, and test in isolated environments before production deployment. List & Monetize Your SkillSubmit your Claude Code skill and start earning Use Cases▌User Story & Requirements GenerationCreate detailed user stories, acceptance criteria, and feature specs Example Generate user stories for 'password reset feature' with acceptance criteria, edge cases, and test scenarios ✓ Reduce spec writing time by 50%, ensure comprehensive coverage Competitive AnalysisResearch competitors, compare features, identify gaps Example Analyze 5 competitor products, create feature comparison matrix, suggest differentiation opportunities ✓ Complete competitive research in 2 hours instead of 2 days Roadmap PrioritizationEvaluate features using frameworks (RICE, ICE, Kano) and create prioritized backlogs Example Score 20 feature ideas using RICE framework, generate prioritized roadmap with rationale ✓ Make data-driven prioritization decisions faster Stakeholder CommunicationDraft PRDs, status updates, and stakeholder presentations Example Create executive summary of Q3 roadmap, monthly progress report, feature launch announcement ✓ Save 3-5 hours/week on communication overhead Implementation Guide▌Prerequisites
Time Estimate30-60 minutes to see productivity improvements Installation Steps
Common Pitfalls
Best Practices▌✓ Do
✗ Don't
💡 Pro Tips
When to Use This▌✓ Use WhenUse for user story writing, competitive research, roadmap prioritization, stakeholder communication, and PRD drafting. Best for reducing repetitive documentation and research work. ✗ Avoid WhenAvoid for strategic product vision (requires deep customer empathy), pricing decisions (needs market and financial expertise), or when face-to-face customer discovery is more valuable than speed. Learning Path▌
DiscussionProduct Hunt–style comments (not star reviews)
general reviews Ratings4.7★★★★★61 reviews
showing 1-10 of 61 1 / 7 |