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. Once you have a scale, the Optical Size Adjuster ensures the fallback font renders at the same visual size as the primary so the scale holds during font load. Pair the scale with the Vertical Rhythm Calculator to snap each generated size to a baseline-aligned line-height and margin. Scale alone is not enough; tracking should vary with both size and weight. The Letter-Spacing Optimizer generates a per-size, per-weight tracking matrix. For ordered lists that match the rest of the type system, the CSS Counter Style Generator builds custom markers (Roman, Greek, symbols) that integrate with your scale. The first letter of a long-form article is one of the most powerful design moments. The Drop Cap Generator produces editorial-quality drop caps that scale with your type system. Shadow intensity should vary with size. The Text Shadow Designer includes presets calibrated for headline versus body sizes.

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.

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.

Should body text be a step in the scale or sit outside it?+

Body text should be a fixed step in the scale and is usually the anchor — the size every other step is derived from. Common practice is to set body at 16px (or 1rem) and let the scale ratio generate the heading sizes upward and the caption/label sizes downward. Treating body as 'outside the scale' breaks the math and makes future scale tweaks (changing the ratio for a new visual direction) much harder.

📖 Learn More

Built by Derek Giordano · Part of Ultimate Design Tools

Related Tools