Typography Scale
Define a modular type scale with ratio-based sizes, weights, line heights, and usage rules for a product UI.
Overview
Typography Scale is an agent skill most often used in Build frontend (also Validate landing) that creates modular typography scales for readable, consistent digital interfaces.
Install
npx skills add https://github.com/owl-listener/designer-skills --skill typography-scaleWhat is this skill?
- Ratio-driven size ladder (e.g. 1.25 major third, 1.333 perfect fourth) from 12px caption to 48–64px display
- Weight scale: Regular 400, Medium 500, Semibold 600, Bold 700
- Line-height presets: tight 1.2 headings, normal 1.5 body, relaxed 1.75 long-form
- Letter-spacing rules for headings, body, and uppercase captions
- Font pairing guidance: primary UI, optional secondary headings, mono for code/data
- Documents an 8-step size ladder from 12px caption to 48–64px display
- Recommends limiting routine UI to 4–5 type sizes
- Specifies 16px minimum body size and 45–75 character line length
Adoption & trust: 683 installs on skills.sh; 1.5k GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
Your app and landing page use random font sizes and line heights so nothing feels like one product.
Who is it for?
Solo builders standardizing UI type before shipping a SaaS dashboard, mobile web app, or marketing site.
Skip if: Print-only book layout or teams that already locked a full design system in Figma with no token changes planned.
When should I use this skill?
Starting or refactoring a product UI type system, design tokens, or landing page typography.
What do I get? / Deliverables
After the skill runs, you have a documented modular scale with sizes, weights, line heights, and usage rules ready to map into CSS or design tokens.
- Documented size, weight, line-height, and letter-spacing scale
- Usage rules per style and responsive adjustments for mobile
Recommended Skills
Journey fit
Spans multiple journey phases - primary shelf plus alternate fits below.
Typography systems are created during Build when UI tokens and components are being standardized. Frontend is the canonical shelf because type scales directly feed CSS, design tokens, and component libraries.
Where it fits
Set caption through display sizes so pricing and hero lines match before you publish the waitlist page.
Export ratio-based rem scales into Tailwind theme.extend.fontSize for your component library.
Keep body at 16px+ and heading hierarchy sensible so long-form SEO pages stay readable in search snippets and on page.
How it compares
Use for systematic type ramps, not as a logo, color palette, or illustration skill.
Common Questions / FAQ
Who is typography-scale for?
Indie founders and designer-developers who need a clear type system for web and mobile interfaces without a dedicated brand team.
When should I use typography-scale?
In Build frontend when defining design tokens, and in Validate landing when tightening hero and pricing typography before launch.
Is typography-scale safe to install?
See the Security Audits panel on this Prism page; the skill is editorial guidance only and does not execute network or shell actions by itself.
SKILL.md
READMESKILL.md - 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