Typography Scale
- 1.2k installs
- 1.9k repo stars
- Updated June 14, 2026
- owl-listener/designer-skills
typography-scale is a design skill that generates consistent, scalable typography systems with modular size, weight, and line-height relationships for developers and designers who need professional text hierarchies acros
About
typography-scale is an owl-listener designer-skills guide for building modular typographic systems across digital products. The skill defines a ratio-based size scale—examples include 12px caption, 14px body small, 16px base body, 20px subheading, 24px heading 3, 32px heading 2, 40px heading 1, and 48–64px display—plus weight steps at 400, 500, 600, and 700 and line heights such as 1.2 for headings. Developers reach for typography-scale when starting a design system, auditing inconsistent font sizes, or generating token-ready type ramps for CSS or mobile theme files. The skill ties size, weight, and leading into one harmonious scale instead of one-off pixel picks.
- Creates modular scales using mathematical ratios such as 1.25 major third or 1.333 perfect fourth
- Defines size, weight (400-700), line-height (1.2-1.75), and letter-spacing rules in one pass
- Recommends harmonious font pairings including primary UI, secondary headings, and mono for code
- Includes responsive adjustments that maintain 16px minimum body size on mobile
- Outputs documented usage rules ready for design systems or component libraries
Typography Scale by the numbers
- 1,186 all-time installs (skills.sh)
- +59 installs in the week ending Jul 29, 2026 (Skillselion tracking)
- Ranked #347 of 1,888 Design & UI/UX skills by installs in the Skillselion catalog
- Security screen: LOW risk (skills.sh audit)
- Data as of Jul 31, 2026 (Skillselion catalog sync)
npx skills add https://github.com/owl-listener/designer-skills --skill typography-scaleAdd your badge
Show developers this skill is listed on Skillselion. Paste this into your README.
| Installs | 1.2k |
|---|---|
| repo stars | ★ 1.9k |
| Security audit | 3 / 3 scanners passed |
| Last updated | June 14, 2026 |
| Repository | owl-listener/designer-skills ↗ |
How do you build a modular typography scale for UI?
Generate consistent, scalable typography systems that look professional across web and mobile interfaces.
Who is it for?
Designers and frontend developers defining a new design system or fixing inconsistent text sizing across web and mobile screens.
Skip if: Projects needing only a single font pairing with no hierarchical scale or print-only typography with no screen constraints.
When should I use this skill?
The user asks for a type scale, font size ramp, heading hierarchy, or modular typography tokens for a UI.
What you get
Type size ramp, weight scale, line-height rules, and design-token-ready typography definitions
- Typography size ramp
- Weight and line-height tokens
- Design-system type definitions
By the numbers
- Size scale spans 8 steps from 12px caption to 48–64px display
- Weight scale defines 4 steps at 400, 500, 600, and 700
Files
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
Related skills
Frontend DesignGenerate distinctive, production-grade frontend interfaces and components that avoid generic AI aesthetics.698k164k
Web Design GuidelinesAutomatically audit frontend code against the latest Vercel Web Interface Guidelines for consistency, accessibility, and UX quality.486k29.4k
Lark WhiteboardGenerate valid Lark Whiteboard (Feishu Board) documents with correctly placed connectors, automatic routing, and proper schema compliance directly from agent inst382k15.8k
Sleek Design Mobile AppsGenerate mobile app screens and UI from plain English descriptions using the Sleek.design API.315k470
Design Taste FrontendOverride generic LLM frontend output with intentional, metric-driven UI/UX taste.284k66.9k
Ui Ux Pro MaxGet instant, high-quality UI/UX decisions, component recommendations, style guidance, and code improvements across web and mobile projects.282k109kFAQ
What sizes does typography-scale include?
typography-scale defines steps such as 12px caption, 14px body small, 16px base, 20px subheading, 24px H3, 32px H2, 40px H1, and 48–64px display using ratio-based modular scaling.
Which weights and line heights does typography-scale recommend?
typography-scale maps Regular 400, Medium 500, Semibold 600, and Bold 700 weights, with tight 1.2 line height for headings and separate leading rules for body copy readability.
Is Typography Scale safe to install?
skills.sh reports 3 of 3 security scanners passed. Review the Security Audits panel on this page before installing in production.