About typography-scale
A design skill for creating modular typography systems for digital interfaces. It covers scale, weights, spacing, font pairing, responsive adjustments, and rules for consistent use.
Key features
- 01Modular type-size scales
- 02Weight, line-height, and spacing guidance
- 03Font-pairing recommendations
- 04Responsive typography guidance
- 05Style documentation practices
Use cases
- 01Defining interface text styles
- 02Creating a consistent product type system
- 03Adapting headings for mobile screens
- 04Checking text settings with real content
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