Claude MarketplacesSubmit

Typography Scale

owl-listener/designer-skills

This sets up a complete typographic system based on modular scales and mathematical ratios like 1.25 or 1.333, giving you a proper hierarchy from 12px captions up to 64px display text. You get size, weight, line height, and letter spacing all mapped out with specific recommendations for each level. It covers font pairing rules, responsive adjustments for mobile, and the basics like keeping body text at 16px minimum and line lengths between 45-75 characters. Honestly, this is the kind of foundational work most teams skip or botch, so having it systematized saves you from arbitrary pixel pushing and ensures your text actually looks coherent across the product.

skills.sh installs: 2.8K
GitHub stars: 3.3K
last updated: Aug 21, 2026

Install

$ npx -y skills add owl-listener/designer-skills --skill typography-scale --agent claude-code

Installs into .claude/skills of the current project.

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

SKILL.md on GitHub

Sponsors

Promote your product hereReach 125k+ visitors monthly Promote your product hereReach 125k+ visitors monthly

Agent CaffeineSponsoredClose your lid, come back to finished work

SnugSponsoredThe clipboard manager for the AI era Promote your product hereReach 125k+ visitors monthly

WaxSponsoredBlock anything with supervision, without erasing your iPhone Promote your product hereReach 125k+ visitors monthly

knobsSponsoredSee your site on any phone, any day, in any language

Details

Repository: github.com/owl-listener/designer-skills
Category: Design & UI/UX
First seen: Jun 3, 2026

Recommended

More Design & UI/UX

1

lean-ux-canvasdeanpeters/product-manager-skillsGuide teams through Lean UX Canvas v2. Use when framing a business problem, surfacing assumptions, and defining what to learn next.2.7Kskills.sh installs

2

presentation-designjwynia/agent-skillsDesign and evaluate presentations that communicate effectively. Use when designing a presentation, creating slides, getting presentation feedback, structuring a2.7Kskills.sh installs

3

minimalist-reviewslavingia/skillsReview any business decision, plan, or strategy through the minimalist entrepreneur lens. Use when someone wants a gut-check on a business decision, wants to si2.7Kskills.sh installs

4

game-design-theorypluginagentmarketplace/custom-plugin-game-developerComprehensive game design theory covering MDA framework, player psychology, balance principles, and progression systems. Master why games are fun.2.6Kskills.sh installs

5

design-critiqueowl-listener/designer-skillsFacilitate structured design critiques with clear feedback frameworks and actionable outcomes.2.5Kskills.sh installs

6

gzh-designisjiamu/gzh-design-skill微信公众号文章排版引擎，将 Markdown 转换为可直接粘贴到公众号编辑器的 HTML。主题风格从 references/theme-index.md 注册的自定义主题库中选取，自动章节编号、关键词下划线标记、引言卡片、目录导航、代码块、图片/GIF、作者签名。支持 Markdown / Word(.docx) / 2.4Kskills.sh installs