---

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