Typography Scale

by owl-listener9a6930cf84a8No license2.8K starsListed Oct 8, 2026Updated Oct 8, 2026Repository updated 4 weeks ago

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).

Instructions onlyDesign & Creative
AI-generated overview

Defines modular typography scales with size, weight, line-height and letter-spacing relationships for digital interfaces.

What it does
This skill provides guidance for building a modular typographic system for digital products. It specifies a size scale based on a ratio, weight steps, line-height and letter-spacing values, font pairing roles, and responsive adjustments. It also lists best practices such as limiting sizes in regular use and keeping body text at a minimum of 16px.
When to use it
Use it when establishing typographic structure for a product or interface. It is intended for defining type scales rather than judging existing screens or setting line length, which the document assigns to other skills.
Requirements
No tools, packages, runtimes, credentials or network access are required; it contains instructions only and ships no scripts.

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

Source and attribution

Source:owl-listener/designer-skillsinui-design/skills/typography-scaleat commit9a6930c

License: No license

Content belongs to its original authors. SourceWeft indexes it from a public repository.

Report or request removal

More from owl-listener/designer-skills

Zeigarnik Effect

owl-listener

Applies the Zeigarnik Effect to design progress indicators, saved drafts, interruption handling and re-engagement prompts.

Design & Creative2.8Kupdated 4 weeks ago

Teslers Law

owl-listener

Applies Tesler's Law to decide whether product or user should absorb irreducible complexity in a design.

Design & Creative2.8Kupdated 4 weeks ago

Von Restorff Effect

owl-listener

Applies the Von Restorff (isolation) effect to make one key element visually distinct in a UI or layout.

Design & Creative2.8Kupdated 4 weeks ago

State Machine

owl-listener

Models UI component behavior as finite state machines with states, events, transitions, guards, and actions.

Design & Creative2.8Kupdated 4 weeks ago

Visual Hierarchy

owl-listener

Guidance for establishing visual hierarchy in interface layouts using size, weight, colour, spacing and position.

Design & Creative2.8Kupdated 4 weeks ago

Serial Position Effect

owl-listener

Applies the Serial Position Effect to order menus, lists, and step sequences so key items land where users recall them best.

Design & Creative2.8Kupdated 4 weeks ago

More in Design & Creative

Theme Factory

anthropics

Featured

Offers 10 preset color-and-font themes, plus custom theme generation, for styling slide decks, documents, reports and HTML pages.

Design & Creative179Kupdated today

Slack Gif Creator

anthropics

Featured

Creates animated GIFs sized and optimized for Slack, with PIL drawing helpers, easing and validation utilities.

Includes scripts
Design & Creative179Kupdated today

Frontend Design

anthropics

Featured

Guidance for distinctive, intentional visual design when building or reshaping a user interface.

Design & Creative179Kupdated today

Canvas Design

anthropics

Featured

Creates original visual art as PNG or PDF from a written design philosophy, for posters, artworks and other static pieces.

Design & Creative179Kupdated today

Brand Guidelines

anthropics

Featured

Applies Anthropic's official brand colors and typography to artifacts that should carry the Anthropic look-and-feel.

Design & Creative179Kupdated today

Frontend Design

anthropics

Featured

Guides an agent through distinctive, intentional visual design for new or redesigned user interfaces.

Design & Creative149Kupdated today