What is a typography scale?

A typography scale is a set of harmonious font sizes based on a mathematical ratio. Starting from a base size, each step multiplies by the ratio (1.25 'Major Third', 1.333 'Perfect Fourth', etc.) to create visually balanced heading hierarchies.

Typography Scale Calculator | Ultimate Design Tools

What Is the Typography Scale Generator?

Generate harmonious type scales using musical and mathematical ratios. Create consistent heading and body text hierarchies for web projects.

Why Use This Tool?

A typography scale defines the relative sizes of headings, body text, and small text using a consistent ratio. This creates visual harmony — the same principle that makes musical intervals sound pleasing.

How to Use This Typography Scale

Set your base font size — Enter the base size for body text — 16px is the browser default and the most common starting point.
Choose a scale ratio — Select from Major Second (1.125), Minor Third (1.2), Major Third (1.25), Perfect Fourth (1.333), or Augmented Fourth (1.414). Higher ratios create more dramatic size differences.
Preview the scale — See all generated sizes applied to sample headings and body text, from H1 down to small/caption text.
Copy the values — Export the typography scale as CSS custom properties, Tailwind config, or plain pixel/rem values.

Tips and Best Practices

→ Use smaller ratios for text-heavy sites. A 1.2 (Minor Third) or 1.25 (Major Third) ratio creates subtle, readable heading hierarchies ideal for blogs, documentation, and content sites.
→ Use larger ratios for bold designs. A 1.333 (Perfect Fourth) or 1.414 (Augmented Fourth) ratio creates dramatic size differences — great for landing pages, portfolios, and hero sections.
→ Set line-height for each scale step. Large headings need tighter line-height (1.1–1.3), while body text needs looser line-height (1.5–1.7). Adjust line-height per step, not globally.
→ Use the scale for spacing too. Apply the same scale ratio to your spacing system for visual consistency — heading sizes, padding, and margins all follow the same mathematical progression.

Frequently Asked Questions

What ratio should I use?

Minor Third (1.200) for compact designs, Major Third (1.250) for general web use, Perfect Fourth (1.333) for spacious layouts, and Golden Ratio (1.618) for dramatic hierarchies.

How many scale steps do I need?

Typically 6-8: a base size, 3-4 heading levels, and 1-2 small text sizes. More steps are needed for complex editorial designs.

Should I use the scale for spacing too?

Yes — many design systems derive spacing values from the same ratio as their type scale. This creates a unified visual rhythm across typography and layout.

What is a typographic scale?+

A typographic scale is a set of font sizes generated by multiplying a base size by a consistent ratio. Starting from 16px with a 1.25 ratio: 16 → 20 → 25 → 31.25 → 39.06. This mathematical progression creates naturally harmonious size relationships, similar to musical intervals. It's the foundation of consistent, professional typography.

What scale ratio should I choose?+

It depends on your design context. 1.125 (Major Second): minimal hierarchy, dense content. 1.2 (Minor Third): moderate, all-purpose. 1.25 (Major Third): clear hierarchy, most popular. 1.333 (Perfect Fourth): dramatic, great for marketing. 1.414 (Augmented Fourth): very dramatic, bold designs.

How does a type scale improve design consistency?+

Without a scale, designers pick font sizes arbitrarily — 14px here, 17px there, 22px somewhere else. A scale constrains choices to a harmonious set of values. This creates predictable visual hierarchy, reduces design decisions, makes responsive scaling easier, and ensures sizes look intentionally related rather than random.

📖 Learn More

Built by Derek Giordano · Part of Ultimate Design Tools

Related Tools