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
Facilitate structured design critiques with clear feedback frameworks and actionable outcomes.
Identify, categorize, and prioritize accumulated design inconsistencies and structural problems across a product.
Communicate design's contribution to business and user outcomes in terms that resonate with stakeholders.
Create QA checklists for verifying design implementation accuracy.
Establish design review gates with criteria, checklists, and approval workflows.
Plan and facilitate design sprints from challenge framing through prototype testing.
Create developer handoff specifications with measurements, behaviors, assets, and edge cases.
Design team workflows covering task management, collaboration rituals, and tooling.