Type Scale

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:

: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:

module.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:

{
  "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