Skip to main content
affpapa.org
RU EN
skill CX Codex

typography-scale — Claude Code skill: modular type scale

Builds a modular type scale with sizes, weights and line heights. Useful when you are setting up a design system from scratch.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓ 
npx skills add Owl-Listener/designer-skills --skill typography-scale -a claude-code
Open on GitHub

What typography-scale does

The skill defines a typographic system for an interface: a size scale from caption to display, a weight set, line-height values and letter spacing. Sizes derive from a 16px base through a ratio, such as 1.25 or 1.333.

Inside you get the scale components spelled out: sizes from 12px up to 48–64px, weights from Regular to Bold, Tight 1.2 for headings and Normal 1.5 for body text, tracking for large headings and uppercase labels. Font pairing and mobile adaptation are covered too.

It is not for judging a screen you already shipped — that is critique-typography, and line length belongs to readable-measure. Reach for this one when the type system needs designing up front rather than patching later.

What it helps with

  • derive a size scale from a 16px base using a ratio
  • pick weights and line heights for headings and body copy
  • pair a primary, secondary and mono typeface
  • carry the scale to mobile without hurting readability
  • document usage rules for every style

Example prompts for the agent

  • build a modular type scale for a landing page on a 1.25 ratio
  • set weights and line heights for headings and body text
  • adapt the scale to mobile, keeping body at 16px or larger

How to install typography-scale

1Skills CLI (Vercel)

npx skills add Owl-Listener/designer-skills --skill typography-scale -a claude-code

2Manually: put the files in place

~/.claude/skills/typography-scale/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/typography-scale/

Step by step, with commands for each platform: How to install skills in Claude Code: five ways

Questions about typography-scale

How do I install typography-scale in Claude?

Run npx skills add Owl-Listener/designer-skills --skill typography-scale -a claude-code. The skill lands at ~/.claude/skills/typography-scale/SKILL.md.

Which platforms does this skill support?

Claude, Codex, Cursor, GitHub Copilot, Gemini CLI and OpenCode. Copilot uses a different command: gh skill install Owl-Listener/designer-skills typography-scale.

How is typography-scale different from critique-typography?

This one creates a scale from scratch. The other judges an existing screen. Line length is handled by a separate skill, readable-measure.

Source text

SKILL.md · MIT 
---
name: typography-scale
description: 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).
---
# 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

© Owl-Listener · MIT · Owl-Listener/designer-skills

Similar skills

Everything for Design →
modular-scale-typography dembrandt Builds a ratio-based type scale where every font size links to a common base. Use it to generate CSS tokens or Tailwind configs when text sizes feel arbitrary. CX Codex +1 884installs ui-typography bencium A skill that sets typography rules for interfaces and has the agent apply them silently while generating HTML, CSS and React. CX Codex +1 3,900installs better-typography jakubkrehel Reviews interface typography and applies fixes through the project’s styling system. Use it to check text hierarchy, wrapping, truncation and punctuation. CX Codex +1 34,200installs web-typography wondelai This skill helps you select and configure typefaces for web projects: from choosing a font family to optimizing size, line height, and measure. Use it when you need readable typography or want to find a well-matched font pair. CX Codex +1 9,200installs kinetic-typography iart-ai Generates expressive kinetic text animations, split-text reveals, and variable font effects in CSS, GSAP, Framer Motion, and Remotion. CX Codex +1 2,200installs editorial typeui.sh A skill that turns your agent into an editorial design-system author: serif type scale, 8pt grid, color tokens, component states and accessibility checks. CX Codex +1 2,700installs

From the same set111

presentation-deck The skill lays out a design presentation around one audience and one decision, from hook to the ask. Handy before an internal design review. CX Codex +1 3,100installs color-system This skill walks an agent through building a product palette: tonal scales, semantic roles and WCAG contrast checks. Useful when colours are defined from scratch. CX Codex +1 2,500installs illustration-style Define an illustration style guide covering visual language, colour usage, and component placement rules. Useful when standardising graphics or commissioning art. CX Codex +1 2,500installs visual-hierarchy This skill sets the order in which interface elements attract attention through size, weight, colour, spacing, and position. Use it when composing new screens. CX Codex +1 2,500installs data-visualization Guides your agent through picking a chart type and setting axes, labels and accessible colors so the result reads without a legend. CX Codex +1 2,400installs layout-grid This skill defines a responsive page grid: columns, gutters, margins and breakpoint behaviour. Handy when you are setting up page structure from scratch. CX Codex +1 2,400installs icon-system Sets design specifications for icon systems, covering grids, size tiers, naming rules, and accessibility. Ideal for standardising iconography in design systems. CX Codex +1 2,400installs user-flow-diagram Draws screen-level flow diagrams with entry points, decision branches and error paths. Useful when a feature needs step-by-step specs. CX Codex +1 2,400installs

Project sponsors

Companies that keep this analytics open
Gold sponsor
Nutra.Club

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor