All Skills Search Tools

|

Loading...

AI Agent Skills Directory with categorization, English/Chinese translation, and script security checks.

Sitemap

Home
All Skills
Search
Tools

About

About Us
Disclaimer
Copyright

Help

FAQ
Privacy
Terms

Contact Us:osulivan147@qq.com

© 2026 Skill4Agent. All rights reserved.

Home/All Skills/Product & Design/typography-scale

typography-scale

Original：🇺🇸 English

Translated

Create a modular typography scale with size, weight, and line-height relationships.

1installs

Sourceowl-listener/designer-skills

Added on2026-03-12

NPX Install

npx skill4agent add owl-listener/designer-skills typography-scale

Tags

Translated version includes tags in frontmatter

typography-scale digital-interface-design responsive-typography font-pairing typography-best-practices

SKILL.md Content

View Translation Comparison →

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

Download

Download TranslatedIncludes original Skill.md

(1.9 KB)Download Original(901 B)

Related Skills

breakdown-feature-prd

Prompt for creating Product Requirements Documents (PRDs) for new features, based on an Epic.

onboarding-cro

When the user wants to optimize post-signup onboarding, user activation, first-run experience, or time-to-value. Also use when the user mentions "onboarding flow," "activation rate," "user activation," "first-run experience," "empty states," "onboarding checklist," "aha moment," or "new user experience." For signup/registration optimization, see signup-flow-cro. For ongoing email sequences, see email-sequence.

book-cover-design

Book cover design with genre-specific conventions, typography rules, and AI image generation. Covers fiction and non-fiction genres, sizing, thumbnail testing, and iteration workflows. Use for: self-publishing, ebook covers, print covers, audiobook covers, cover mockups. Triggers: book cover, cover design, ebook cover, book art, novel cover, self publishing cover, kindle cover, audiobook cover, book jacket, cover illustration, fiction cover, nonfiction cover

site-architecture

When the user wants to plan, map, or restructure their website's page hierarchy, navigation, URL structure, or internal linking. Also use when the user mentions "sitemap," "site map," "visual sitemap," "site structure," "page hierarchy," "information architecture," "IA," "navigation design," "URL structure," "breadcrumbs," "internal linking strategy," or "website planning." NOT for XML sitemaps (that's technical SEO — see seo-audit). For SEO audits, see seo-audit. For structured data, see schema-markup.