Skip to content
MyDailyTool

Type Scale Generator

Generate a modular type scale from a base font size and ratio (Major Third, Perfect Fourth, Golden Ratio, and more). Outputs CSS custom properties for a consistent typographic system.

  • step--2The quick brown fox10.24px / 0.640rem
  • step--1The quick brown fox12.80px / 0.800rem
  • step-0The quick brown fox16.00px / 1.000rem
  • step-1The quick brown fox20.00px / 1.250rem
  • step-2The quick brown fox25.00px / 1.563rem
  • step-3The quick brown fox31.25px / 1.953rem
  • step-4The quick brown fox39.06px / 2.441rem
  • step-5The quick brown fox48.83px / 3.052rem
  • step-6The quick brown fox61.04px / 3.815rem
  • step-7The quick brown fox76.29px / 4.768rem

How to use the type scale generator

Pick a base size and a musical-style ratio. The scale generates step-by-step font sizes — useful for type ramps in design systems.

Formula & explanation

Each step multiplies the previous by the ratio: size_n = base × ratio^n. The 'major third' ratio (1.25) is a popular default.

Examples

Base 16px, ratio 1.25, 8 steps → 16, 20, 25, 31.25, 39.06, … plus two smaller steps below the base.

Frequently asked questions

What is a type scale?
A type scale is a set of font sizes derived by multiplying a base size by a fixed ratio, creating visual harmony across headings, body text, and captions.
Which ratio should I use for body-heavy content?
Minor third (1.2) or Major second (1.125) produce subtle, compact scales well-suited to dense UIs. Major third (1.25) or Perfect fourth (1.333) give more dramatic hierarchy for landing pages.
What is the golden ratio type scale?
Using 1.618 as the ratio produces sizes that grow quickly — great for display headings but can feel too large for body copy if your step count is high.
How do I use a type scale in CSS?
Map each step to a CSS custom property or Tailwind text-size class. For example, step-0 becomes your base body size and step-2 or step-3 your h2/h1 sizes.

Related design & css tools