# Typography Scale

> Creates modular typography scales with size, weight, and line-height relationships for consistent digital interfaces.

- Skill: `owl-listener/typography-scale` (Agent Skill)
- Install (CLI): `npx skillmds@latest add owl-listener/typography-scale`
- Raw SKILL.md: https://api.skillmd.com/api/skills/owl-listener/typography-scale/raw
- Safety review: PASS (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Design & Media, UI Design
- Tags: Font Pairing, Font Size, Font Weight, Letter Spacing, Line Height, Responsive Typography, Typographic Scale, Typography
- Author: Owl Listener (https://skillmd.com/u/owl-listener)
- Updated: 2026-07-06
- Page: https://skillmd.com/skills/owl-listener/typography-scale

---

# 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