typography-scale

Create a modular type scale with size, weight, and line-height relationships. Use when establishing typographic structure. For line length only use `readable-measure`; for judging type on an existing screen use `critique-typography` (visual-critique).

2,560
installs: 0 up / 0 down, score 0.00
votes: 3,024
repo stars
Updated: 2 months ago
In the catalog since: 1 Oct 2026
From: owl-listener/designer-skills

Get it through your agent npx skills add owl-listener/designer-skills@typography-scale

Skill instructions

Rendered from the published SKILL.md, 40 lines.

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

Get it through your agent

Call the Graph-of-Skills MCP server's retrieve_skill_bundle tool and it returns this skill's text inside your budget.

{
  "tool": "retrieve_skill_bundle",
  "arguments": {
    "query": "typography-scale"
  }
}

New to this? Set up Graph-of-Skills or get a free key. The text on this page comes from its authors: how skills are sourced and what we check. If none fits your task, your agent can write a skill for your own library. To keep a skill from your own library on a machine, see how to install one of your skills.

Share on X Share on LinkedIn Share on Bluesky Share on Hacker News

Share on Reddit

Source

Source repository owl-listener/designer-skills
Listing on skills.sh

From owl-listener/designer-skills via skills.sh

Related skills

critique-typography
Critique a rendered screen's typography — scale usage, readability, consistency, and token compliance. Use when reviewing type on a screen. For defining the scale itself, use `typography-scale` (ui-design).
1,964 installs
readable-measure
Set line length and measure for comfortable reading across type sizes and breakpoints. Use when tuning body text. Covers measure only — for the full size and weight scale, use `typography-scale`.
1,729 installs
better-typography
Sets and reviews how text renders in your product, from the type scale and spacing to font features, wrapping, truncation and punctuation.
33,815 installs
web-typography
Select, pair, and implement typefaces for web projects. Use when the user mentions "font pairing", "which typeface", "line height", "responsive typography", "web font loading", "type hierarchy", "variable fonts", "FOUT/FOIT", "typographic scale", or "the text is hard to read". Also trigger when choosing between system fonts and web fonts, optimizing font-loading performance, or designing readable long-form content. Covers readability evaluation, CSS implementation, and performance optimization. For overall UI design systems, see refactoring-ui. For dramatic typographic experiences, see top-design.
9,157 installs
typeset
Improves typography by fixing font choices, hierarchy, sizing, weight, and readability so text feels intentional. Use when the user mentions fonts, type, readability, text hierarchy, sizing looks off, or wants more polished, intentional typography.
64,670 installs

More from owl-listener/designer-skills

presentation-deck
Structure a design presentation for a specific audience and decision. Use when presenting internally. For a portfolio narrative use `case-study`; for the written argument use `design-rationale`.
3,072 installs
visual-hierarchy
Establish hierarchy through size, weight, colour, spacing, and position so the eye lands in the intended order. Use when composing new work. For judging an existing screen, use `critique-visual-hierarchy` (visual-critique).
2,506 installs
illustration-style
Define an illustration style guide — visual language, colour usage, and application rules. Use when commissioning or standardising illustration. For icons, use `icon-system` (design-systems).
2,505 installs
color-system
Build a product colour system — tonal scales, semantic roles, and contrast compliance. Use when defining or rebuilding colour from scratch. For dark-mode adaptation use `dark-mode-design`; for chart palettes use `data-visualization`; for multi-brand token architecture use `theming-system` (design-systems).
2,466 installs
dark-mode-design
Adapt an existing palette to dark mode — surface elevation, contrast rebalancing, and desaturation rules. Use when you already have a light palette to translate. For building the base palette first, use `color-system`.
2,420 installs

Content is provided as published by its creators; you are responsible for how you use it.

To request removal, use the contact form.