Skill Store 33

Typography Scale

Create a modular type scale with size, weight, and line-height relationships.

by owl-listener · MIT

The skill

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

Use this skill

Connect your agent to the Skill Store MCP server and ask for it by ref: owl-listener/typography-scale-56852519486.

Download SKILL.md · Markdown version

Details

Publisher
owl-listener
Category
Software Development › Frontend & UI
License
MIT
Updated
2026-09-05

References

More from owl-listener

  • Design Critique Facilitate a structured team critique — framing, feedback rules, and actionable outcomes.
  • Design Debt Audit Inventory and prioritise accumulated design inconsistencies across a product.
  • Design Impact Reporting Communicate design's contribution to business and user outcomes in stakeholder language.
  • Design Qa Checklist Build a QA checklist for verifying that a build matches the design.

Related skills

  • Modular Scale Typography Ratio-based type scale where every size relates to the others.
  • Readable Measure Set line length and measure for comfortable reading across type sizes and breakpoints.
  • Typography System Build or repair a typography system: a modular type scale, font choices and loading, hierarchy, l…
  • Typography Scale Builder Build a complete typographic system -- modular or fluid type scale, line-height and tracking per…
  • Critique Typography Critique a rendered screen's typography — scale usage, readability, consistency, and token compli…