typography-scale
owl-listener/designer-skills
Create modular type scales with harmonious size, weight, and line-height relationships for consistent digital typography.
What is typography-scale?
This skill helps you build systematic typography scales for digital interfaces using mathematical ratios and documented style rules. Use it when establishing the typographic foundation for a product or design system.
- Generate size scales based on mathematical ratios (e.g., major third 1.25, perfect fourth 1.333)
- Define weight scales across regular, medium, semibold, and bold
- Set line-height relationships for headings (1.2), body text (1.5), and long-form content (1.75)
- Configure letter spacing for different contexts (tight, normal, wide)
- Plan responsive typography that scales appropriately across screen sizes
- Document font pairing strategies for primary, secondary, and monospace fonts
How to install typography-scale
npx skills add https://github.com/owl-listener/designer-skills --skill typography-scaleHow to use typography-scale
- 1.Choose a mathematical ratio (e.g., 1.25 major third or 1.333 perfect fourth) for your size scale
- 2.Define your base body size (16px minimum) and calculate heading sizes using the ratio
- 3.Assign weight values (400, 500, 600, 700) to different text roles
- 4.Set line-height values: 1.2 for headings, 1.5 for body, 1.75 for long-form reading
- 5.Configure letter spacing: -0.02em for large headings, 0 for body, 0.05em for labels and captions
- 6.Plan responsive breakpoints that scale heading sizes down on mobile while preserving body text size
- 7.Document usage rules for each typographic style and share with your team
Use cases
- Establishing a complete typography system for a new design system or product
- Creating responsive heading and body text scales that maintain readability across devices
- Defining letter spacing and weight combinations for UI labels, captions, and technical content
- Documenting typographic rules to ensure consistency across a team or codebase
- Scaling down heading sizes for mobile while maintaining minimum 16px body text readability
- Product designers building design systems
- UI/UX designers establishing typographic foundations
- Design system maintainers documenting typography rules
- Frontend developers implementing type scales in code
typography-scale FAQ
Common ratios include 1.25 (major third), 1.333 (perfect fourth), and 1.5 (perfect fifth). Choose based on how much variation you want between sizes; smaller ratios create subtler steps.
16px is the recommended minimum for body text to ensure readability, especially on mobile devices.
Limit to 4-5 sizes in regular use to keep the system manageable and maintain visual harmony.
Always test with real content from your product to ensure the scale works with actual language, word lengths, and context.
Scale down heading sizes on mobile while maintaining the 16px minimum for body text, and adjust line lengths to stay within the 45-75 character optimal range.
Full instructions (SKILL.md)
Source of truth, from owl-listener/designer-skills.
name: typography-scale
description: Create a modular type scale with size, weight, and line-height relationships. Use when establishing typographic structure. For line length only use readable-measure; for judging type on an existing screen use critique-typography (visual-critique).
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
Related skills
More from owl-listener/designer-skills and the wider catalog.
usability-test-plan
Design comprehensive usability test plans with research questions, methodology, participant criteria, and facilitation guides.
user-flow-diagram
Diagram screen-level paths, decisions, and branches to map feature traversal.
user-persona
Build research-grounded personas with goals, frustrations, and behavioral patterns for consistent user reference.
ux-writing
Write clear, helpful interface copy that guides users through your product.
version-control-strategy
Define versioning strategy for design files, components, and libraries to keep collaboration organized and traceable.
visual-hierarchy
Establish visual hierarchy through size, weight, color, spacing, and position to guide user attention.