skills.rest
thrillmade
thrillmadeOFFICIAL
Explore all skills by this author →
GitHub

type-scale

Define and validate typography size scales using a modular ratio and base size.

1|Updated May 15, 2026
Search Tags:#typography#UI design#modular scale#scale design#font size
One-click install
npx skills add https://github.com/thrillmade/agent-skills --skill type-scale-thrillmade
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: type-scale
Source: https://github.com/thrillmade/agent-skills/tree/main/skills/type-scale
Command: npx skills add https://github.com/thrillmade/agent-skills --skill type-scale-thrillmade

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill streamlines the creation, auditing, and extension of typography size scales, ensuring consistency and readability in UI design.

Core Features & Use Cases

  • Modular Scale Design: Establish a base size and ratio for a typography scale, providing a consistent visual hierarchy.
  • Audit Existing Scales: Detect off-rhythm sizes or inconsistent gaps, enhancing the aesthetics of existing typography systems.
  • Extend Scales: Safely add new font sizes to an existing scale, expanding the system without breaking the rhythm.
  • Code Review: Flag hand-picked sizes outside modular ratios and ratios above 1.5 for product UI systems.

Quick Start

Define your typography scale with a base size of 16px and a minor third ratio (1.200) for product UI, then run the skill to generate the scale.

Frequently Asked Questions about type-scale

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

FAQPage Schema
How do I create a consistent typography scale for a UI design system?▼

Create a typography scale by defining a base font size and applying a modular ratio to generate a consistent visual hierarchy. This ensures structural monotonicity and readability across your UI typography system.

What is a modular scale and how does it affect font size hierarchy?▼

A modular scale is a mathematical sequence used to determine font sizes based on a base size multiplied by a fixed ratio. It provides consistent visual rhythm and distinguishability for UI typography.

How do I audit an existing font size scale for UI design inconsistencies?▼

Audit existing typography scales by validating monotonicity, round-trip consistency, and small size distinguishability. This detects off-rhythm font sizes and flags hand-picked values outside the modular ratio.

Can I add new font sizes to an existing modular scale without breaking the rhythm?▼

Extend existing typography scales by safely adding new font sizes derived from the established modular ratio. This maintains the structural rhythm and visual hierarchy without introducing inconsistencies.

Why does my UI typography look inconsistent at small font sizes?▼

UI typography looks inconsistent when font sizes lack distinguishability and round-trip consistency. Validating the modular scale ratio and ensuring monotonicity identifies off-rhythm sizes causing the issue.

What is the best modular ratio for product UI typography systems?▼

A minor third ratio of 1.200 is ideal for product UI typography systems. Ratios above 1.5 are flagged during scale audits because they create excessive gaps that disrupt the visual hierarchy.

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
Gami19Gami19

ui-design

Apply Refactoring UI principles to create cohesive interfaces and design reviews.

Community
Intermediate
erichowenserichowens
181

typography-expert

Generates font pairings and CSS type scales for web typography.

Community
Advanced