---

name: type-scale description: Generates typography scales using modular ratios with auto-calculated line heights. Use when setting up font-size tokens, heading hierarchy (h1-h6), or text sizing systems. Outputs CSS, Tailwind, or JSON.

Type Scale Generator

Overview

Generate harmonious typography scales using musical interval ratios. Automatically calculates appropriate line heights based on font size for optimal readability.

When to Use

• Setting up typography for a new project
• Creating heading hierarchy (h1-h6)
• Standardizing font sizes across components
• Building a responsive type system

Quick Reference: Musical Ratios

The Process

1. Get base size: Default 16px (browser default, good baseline)
2. Choose ratio: Recommend Minor Third (1.2) for most projects
3. Steps up: How many sizes above base (6-8 typical for headings)
4. Steps down: How many sizes below base (2-3 for small/caption text)
5. Ask unit: px, rem, or em?
6. Ask format: CSS, Tailwind, or JSON?
7. Generate: Create scale with auto line heights

Auto Line Height

Larger fonts need tighter line height for readability:

Output Formats

CSS Custom Properties:

Copy:root {
  /* Font Sizes */
  --text-xs: 13.33px;
  --text-sm: 14.22px;
  --text-base: 16px;
  --text-lg: 19.2px;
  --text-xl: 23.04px;
  --text-2xl: 27.65px;

  /* Line Heights */
  --leading-xs: 1.70;
  --leading-sm: 1.70;
  --leading-base: 1.60;
  --leading-lg: 1.50;
  --leading-xl: 1.50;
  --leading-2xl: 1.40;
}

Tailwind Config:

Copymodule.exports = {
  theme: {
    fontSize: {
      'xs': ['13.33px', { lineHeight: '1.70' }],
      'sm': ['14.22px', { lineHeight: '1.70' }],
      'base': ['16px', { lineHeight: '1.60' }],
      'lg': ['19.2px', { lineHeight: '1.50' }],
      'xl': ['23.04px', { lineHeight: '1.50' }],
      '2xl': ['27.65px', { lineHeight: '1.40' }],
    }
  }
}

JSON Tokens:

Copy{
  "typography": {
    "xs": { "fontSize": "13.33px", "lineHeight": "1.70" },
    "sm": { "fontSize": "14.22px", "lineHeight": "1.70" },
    "base": { "fontSize": "16px", "lineHeight": "1.60" },
    "lg": { "fontSize": "19.2px", "lineHeight": "1.50" }
  }
}

Naming Convention

Common Configurations

Compact UI (dashboards, data-dense):

• Ratio: 1.125 (Major Second)
• Base: 14px
• Steps: 2 down, 5 up

Content Site (blogs, marketing):

• Ratio: 1.25 (Major Third)
• Base: 18px
• Steps: 2 down, 6 up

Editorial (magazines, long-form):

• Ratio: 1.333 (Perfect Fourth)
• Base: 20px
• Steps: 2 down, 8 up