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 scale as CSS custom properties, a Tailwind v3 config, SCSS variables or a plain rem/px list.
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.
Related tools
- 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 builds drop caps sized in lines of your body text, with a ::first-letter fallback.
- Shadow intensity should vary with size. The Text Shadow Designer builds layered shadows you can keep heavy on headlines and subtle on body text.
Frequently Asked Questions
Built by Derek Giordano · Part of Ultimate Design Tools