skills.rest
launchapp-dev
launchapp-devOFFICIAL
Explore all skills by this author →
GitHub

typography-scale

Define a ratio-based modular typography scale for UI design.

38|5|Updated Feb 24, 2026
Search Tags:#typography#ui#accessibility#responsive#design-system#scale#font-pairing
One-click install
npx skills add https://github.com/launchapp-dev/animus-cli --skill typography-scale-launchapp-dev
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: typography-scale
Source: https://github.com/launchapp-dev/animus-cli/tree/main/.claude/skills/typography-scale
Command: npx skills add https://github.com/launchapp-dev/animus-cli --skill typography-scale-launchapp-dev

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Creating consistent, scalable typography systems across products is time-consuming and error-prone.

Core Features & Use Cases

  • Ratio-based size scale: defines caption, body, heading, and display tokens using a typographic ratio.
  • Weight and line-height guidelines: provides cohesive weight and line-height relationships for readability.
  • Responsive guidance: adapts scale for mobile while preserving baseline readability.
  • Use Case: implement a UI kit across web and mobile platforms with predictable typography that remains accessible.

Quick Start

Generate a starter typography scale with base 16px body, defined weights, and ratio-based headings.

Frequently Asked Questions about typography-scale

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build a scalable typography system for a UI design?▼

Establish a modular typography system using a ratio-based size scale to generate UI tokens, applying defined weights and line-heights to ensure readable, harmonious text across product platforms.

What is a modular typography scale and when do I need it in a design system?▼

A modular typography scale uses a mathematical ratio to define font sizes across a design system. You need it to maintain visual harmony and accessibility when creating UI style guides for web and mobile platforms.

How do I adjust font sizes and line-heights for responsive mobile layouts?▼

Adjust font sizes for responsive layouts by adapting the modular scale for mobile screens while preserving baseline readability. This involves modifying line-heights and letter-spacing to maintain accessible text across breakpoints.

Can I apply a single typography scale across both web and mobile platforms?▼

Yes, you can apply a single typography scale across web and mobile by using responsive guidance. This adapts the ratio-based size scale and line-heights for smaller screens while preserving baseline readability and accessibility.

What is the best way to define font pairing and weight guidelines for a UI kit?▼

The best way to define font pairing and weight guidelines is to establish a clear weight system with cohesive line-height relationships. This creates predictable, readable text tokens for your UI design system.

Why does my typography look inconsistent across different screen sizes without a ratio?▼

Typography looks inconsistent without a ratio because arbitrary font sizes lack mathematical harmony. Defining a ratio-based size scale with responsive adjustments ensures text scales proportionally and remains accessible across devices.

Related Skills

Explore More Design & Creative Skills→
yonetim258852yonetim258852

modular-scale-typography

Generate modular scale font size tokens as CSS variables for design systems.

Community
Intermediate
DVNghiemDVNghiem
20

design-tokens

Standardize color, typography, spacing, and border tokens across platforms.

Community
Intermediate
curiositechcuriositech
181

web-design-expert

Generate web designs with brand identity, color palettes, typography, and UI/UX patterns.

Official
Intermediate
Situ2000Situ2000

unocss

Generate atomic CSS utilities on demand for React, Vue, Svelte, and HTML projects.

Community
Intermediate