typography_skill

Overview

This skill applies professional typography principles to create readable, hierarchical, and aesthetically refined interfaces. It delivers practical type systems, audits, and implementation guidance for web and product teams. Use it to set scales, choose fonts, optimize spacing, and solve readability or accessibility issues.

How this skill works

I inspect context (screen size, content density, and purpose) and recommend a compact type system: base size, modular ratio, hierarchy table, font choices, and CSS variables. For audits I list typographic issues with concrete recommendations and quick wins. Recommendations include measure, line-height, tracking, responsive rules, and accessibility constraints.

When to use it

• Setting or refining a global type scale for a design system
• Choosing font pairings and web-font loading strategy
• Designing text-heavy layouts like articles, forms, or dashboards
• Fixing readability, contrast, or line-length problems
• Preparing responsive or dark-mode typography adjustments

Best practices

• Establish a single type scale (3–5 levels of headings plus body and small) and stick to it
• Limit families to 1–2 fonts, use variable fonts or 2–3 weights for performance
• Use relative units (rem, ch) and font-display: swap to avoid layout shift
• Aim for 45–75 characters per line for body text and 1.5–1.7 line-height for reading
• Respect accessibility: 16px base minimum, 4.5:1 contrast minimum, and tappable text targets

Example use cases

• Generate a ready-to-use type system with sizes, weights, and CSS variables for a product UI
• Audit an app’s typography and produce a table of issues and prioritized fixes
• Recommend font stack and web-font loading plan with weight-limits and fallbacks
• Adjust headings, line-height, and measure for a responsive blog or marketing site
• Tune dark-mode typography: weight, letter spacing, and color adjustments