# Type Scale

> Generate a mathematical type scale from base size and ratio. Outputs pixel values, rem equivalents, and CSS custom properties. Use Perfect Fourth (1.333) for compact UIs, Major Third (1.250) for standard, or Perfect Fifth (1.500) for dramatic hierarchy.

- Skill: `dragoon0x/type-scale` (Agent Skill)
- Install (CLI): `npx skillmds@latest add dragoon0x/type-scale`
- Raw SKILL.md: https://api.skillmd.com/api/skills/dragoon0x/type-scale/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: dragoon0x (https://skillmd.com/u/dragoon0x)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/dragoon0x/type-scale

---


# /type-scale — Mathematical Type Scale Generator

## Usage
`/type-scale [base] [ratio]`

Default: base=16px, ratio=1.250 (Major Third)

## Available Ratios
- Minor Second: 1.067 — very tight, for data-heavy UIs
- Major Second: 1.125 — compact apps and dashboards
- Minor Third: 1.200 — balanced, good default for apps
- Major Third: 1.250 — clear hierarchy, good for marketing
- Perfect Fourth: 1.333 — strong hierarchy, landing pages
- Augmented Fourth: 1.414 — dramatic, editorial
- Perfect Fifth: 1.500 — very dramatic, hero-focused

## Output
Generate 7 scale stops and output as:
1. Pixel values (rounded to nearest integer)
2. Rem equivalents
3. CSS custom properties
4. Suggested usage (which element gets which size)

## Rules
- Round all values to whole pixels
- Body text is always the base size
- Minimum heading size is 1 step above base
- Maximum 7 steps in the scale
- For app UIs: use fixed scale. For marketing: fluid typography with clamp() is acceptable
- Always pair with line-height recommendations: headings 1.1-1.2, body 1.5-1.7