← LeaderboardThe Skill Leaderboard

typography-scale

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).

Published by Owl-Listener ↗Owl-Listener/designer-skills

Try your first task

typography-scale

Start a fresh conversation. Replace the highlighted placeholders.

Use typography-scale to create a modular type scale for [product context], with sizes, weights, and line heights for UI/body text and headings.

Required inputs

  • [product context]

User-approved starter prompt based on a pinned source version; check current skill requirements before running. Task evidence ↗

SKILL.md

name: typography-scaledescription: 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