typography-scale
The typography-scale skill generates mathematically balanced type systems for digital products by establishing hierarchical size relationships using modular ratios, paired with coordinated weight, line-height, and letter-spacing values. Use this when designing comprehensive typographic systems that need consistency across interfaces while maintaining readability at multiple scales.
git clone --depth 1 https://github.com/Owl-Listener/designer-skills /tmp/typography-scale && cp -r /tmp/typography-scale/ui-design/skills/typography-scale ~/.claude/skills/typography-scaleSKILL.md
# Typography Scale You are an expert in typographic systems for digital interfaces. ## What You Do You create modular typography scales that ensure readable, harmonious, and consistent text across a product. ## Scale Components ### Size Scale Based on a ratio (e.g., 1.25 major third, 1.333 perfect fourth): - Caption: 12px - Body small: 14px - Body: 16px (base) - Subheading: 20px - Heading 3: 24px - Heading 2: 32px - Heading 1: 40px - Display: 48-64px ### Weight Scale Regular (400), Medium (500), Semibold (600), Bold (700). ### Line Height - Tight: 1.2 (headings) - Normal: 1.5 (body text) - Relaxed: 1.75 (long-form reading) ### Letter Spacing - Tight: -0.02em (large headings) - Normal: 0 (body) - Wide: 0.05em (uppercase labels, captions) ## Font Pairing - Primary: UI and body text - Secondary: headings or editorial (optional) - Mono: code, data, technical content ## Responsive Typography - Scale down heading sizes on mobile - Maintain body size (16px minimum for readability) - Adjust line lengths (45-75 characters optimal) ## Best Practices - Use a mathematical ratio for harmony - Limit to 4-5 sizes in regular use - Ensure body text is minimum 16px - Test with real content, not lorem ipsum - Document usage rules for each style
Design an A/B experiment — hypothesis, variants, primary metric, and sample size. Use when a change can be measured quantitatively at scale. For observing behaviour qualitatively, use `test-scenario`.
Audit an existing interface against WCAG, producing findings with severity ratings and remediation steps. Use when you have a design or build to assess now. Not for planning future sessions with assistive-technology users — use `accessibility-test-plan` (prototyping-testing).
Plan accessibility testing — assistive technologies, participant criteria, WCAG coverage, and session protocol. Use when scheduling testing with real AT users. Not for evaluating a design yourself — use `accessibility-audit` (design-systems).
Apply the Aesthetic-Usability Effect — polished, consistent interfaces are perceived as more usable and forgive minor friction. Use when justifying visual polish or diagnosing why a functional design tests badly. For emotional resonance specifically, use `interfaces-that-feel` (interaction-design).
Cluster many qualitative data points into themes and insight statements. Use when synthesising across multiple sessions or sources. For a single transcript use `summarize-interview`; for one segment's inner state use `empathy-map`.
Apply animation principles — easing, staging, follow-through — to one specific UI motion. Use when tuning how an animation feels. For product-wide duration and easing tokens use `motion-system` (design-systems); for a full interaction spec use `micro-interaction-spec`.
A practitioner's toolkit for thinking and communicating as a designer in a business context — reading financials, mapping competitive landscapes, and defending design decisions in the language of value.
Analyse open or closed card sort results into a proposed grouping and label set. Use after running a sort study. For turning that evidence into a full structure, use `information-architecture` (ux-strategy).