Typography Scale Generator

Report an Issue

Help us improve by telling us what went wrong.

Embed this Tool

Customize and copy the embed code for your website.

Build a Harmonious Type Hierarchy in Seconds

Good typography is not about picking a nice font. It is about establishing a clear visual hierarchy where headings, subheadings, body text, and captions relate to each other in a proportional, intentional way. The Typography Scale Generator creates that hierarchy mathematically, giving you a set of font sizes based on a chosen ratio and base size that look balanced and professional together.

What Is a Typographic Scale?

A typographic scale is a series of font sizes where each step is a consistent multiple of the previous one. If your base size is 16px and your ratio is 1.25 (Major Third), the scale produces sizes like 10.24px, 12.8px, 16px, 20px, 25px, 31.25px, and so on. Each size is 1.25 times the previous one, creating a progression that feels natural and balanced to the eye.

This is the same principle that music uses for scales - intervals between notes follow mathematical ratios that sound harmonious. Typography borrows this concept. Common ratios include:

1.067 - Minor Second (tight scale, subtle differences between sizes)

1.200 - Minor Third (compact, good for data-dense applications)

1.250 - Major Third (the most popular choice for web design)

1.333 - Perfect Fourth (more dramatic, good for editorial sites)

1.414 - Augmented Fourth (bold, strong hierarchy)

1.618 - Golden Ratio (dramatic, works best with large displays)

How to Use the Generator

Set your base font size - typically 16px for web, as this is the browser default. Choose a scale ratio from the presets or enter a custom value. The generator produces a complete set of sizes: several steps below the base (for small text, captions, labels) and several steps above (for headings from h6 up to h1). Each size is displayed with its pixel value, rem equivalent, and the scale step number.

You can copy the entire scale as CSS custom properties, a Sass map, or Tailwind config values. Paste them into your project and your type system is ready.

Who Benefits from This Tool

Web designers establishing design systems use the typography scale generator as a foundation. Instead of picking arbitrary font sizes ("h1 should be... 36px? Maybe 40?"), they start with a mathematical relationship that guarantees harmony.

Frontend developers implementing responsive typography need a consistent scale that works across breakpoints. The generator provides the numbers; the developer maps them to CSS variables and adjusts the base size for different screen widths.

Design system teams at companies building component libraries use type scales to ensure consistency across dozens of designers and hundreds of components. A shared scale eliminates the "everyone picks their own font sizes" problem.

Bloggers and content creators customising their site's theme benefit from a well-proportioned type hierarchy that makes articles easy to scan and pleasant to read.

Students studying design use the tool to explore how different ratios create different visual feelings - tight and functional vs. dramatic and editorial.

Choosing the Right Ratio

For most websites, the Major Third (1.250) or Perfect Fourth (1.333) works well. These ratios create noticeable differences between heading levels without making h1 absurdly large or h6 invisibly small. For mobile-first designs where screen space is limited, a tighter ratio like 1.125 or 1.200 prevents headings from dominating small screens. For editorial and magazine-style layouts with lots of whitespace, a wider ratio like 1.414 or 1.618 adds appropriate drama.

Instant, Exportable, and Free

The Typography Scale Generator runs in your browser. Adjust parameters, see the scale update in real time, copy the output in your preferred format. No account, no installation, no server processing. Start your next design project with a solid typographic foundation.