About typography-scale
typography-scale is a design skill for creating consistent, readable type systems for digital interfaces. It covers sizing, spacing, font pairing, and responsive use.
Key features
- 01Modular size and weight scales
- 02Line-height and letter-spacing guidance
- 03Primary, secondary, and mono font roles
- 04Responsive sizing and line lengths
- 05Usage rules and content testing
Use cases
- 01Defining type styles for a product interface
- 02Pairing fonts for body text and headings
- 03Adapting headings for mobile layouts
Install
Copy the command and run it in a terminal.
$
npx skills add https:/After installing, type/typography-scalein Claude Code to confirm it loaded.
Details
From the project READMETypography 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
Comments
Markdown supported