Typography Scale Recommender Calculator
Use our free Typography scale recommender tool to get instant, accurate results. Powered by proven algorithms with clear explanations.
Reviewed by Daniel Agrici, Founder & Lead Developer
Formula
Font Size = Base Size x Ratio^Step
Each step in the scale multiplies the base font size by the chosen ratio raised to the step number. Step 0 is the base size, positive steps go larger (headings), negative steps go smaller (captions). Common ratios like Major Third (1.250) and Perfect Fourth (1.333) create visually pleasing progressions. Line height is automatically adjusted to decrease for larger sizes, maintaining readability.
Worked Examples
Example 1: Blog/Documentation Scale (Major Second)
Problem:Generate a type scale for a documentation site with 16px base, Major Second ratio (1.125), 1.5 line height, 5 steps up and 1 down.
Solution:Step -1: 16/1.125 = 14.22px (0.889rem) — Small text\nStep 0: 16px (1rem) — Body\nStep 1: 16 x 1.125 = 18px (1.125rem) — H6\nStep 2: 18 x 1.125 = 20.25px (1.266rem) — H5\nStep 3: 20.25 x 1.125 = 22.78px (1.424rem) — H4\nStep 4: 22.78 x 1.125 = 25.63px (1.602rem) — H3\nStep 5: 25.63 x 1.125 = 28.83px (1.802rem) — H2\nRange: 14.22px to 28.83px (2.0x range)
Result:7 font sizes | Range: 14.2px to 28.8px | Tight scale ideal for text-heavy content
Example 2: Marketing Landing Page (Perfect Fourth)
Problem:Generate a type scale for a landing page with 18px base, Perfect Fourth ratio (1.333), 1.5 line height, 6 steps up and 2 down.
Solution:Step -2: 18/1.333^2 = 10.13px — Caption\nStep -1: 18/1.333 = 13.50px — Small\nStep 0: 18px — Body\nStep 1: 18 x 1.333 = 23.99px — H6\nStep 2: 23.99 x 1.333 = 31.98px — H5\nStep 3: 31.98 x 1.333 = 42.63px — H4\nStep 4: 42.63 x 1.333 = 56.83px — H3\nStep 5: 56.83 x 1.333 = 75.76px — H2\nStep 6: 75.76 x 1.333 = 100.99px — H1\nRange: 10.1px to 101px (10x range)
Result:9 font sizes | Range: 10.1px to 101px | Dramatic scale for marketing headers
Frequently Asked Questions
What is a typographic scale and why should I use one?
A typographic scale is a set of harmoniously sized text elements based on a consistent mathematical ratio, similar to musical scales. Instead of picking arbitrary font sizes (14px, 18px, 22px, 36px), a scale ensures every size relates to the others through a multiplier. This creates visual harmony and hierarchy automatically. For example, with a base of 16px and a Major Third ratio (1.250), your sizes would be 16, 20, 25, 31.25, 39.06px. Using a scale speeds up design decisions, ensures consistency across pages, and makes responsive scaling easier since you only need to adjust the base size.
Which scale ratio should I choose for my project?
The choice depends on your medium and content type. For body-heavy content like blogs and documentation, use smaller ratios (Major Second 1.125 or Minor Third 1.200) to keep sizes close together for comfortable reading. For marketing sites and landing pages, use larger ratios (Perfect Fourth 1.333 or Golden Ratio 1.618) for dramatic headline contrast. Mobile-first designs benefit from smaller ratios since screen space is limited. The Major Third (1.250) is the most popular all-purpose ratio, offering good contrast without extreme size differences. The Golden Ratio (1.618) creates the most dramatic hierarchy but can produce very large headings.
How do I make my type scale responsive across devices?
The most effective approach is fluid typography using CSS clamp(): set a minimum size, a preferred viewport-relative size, and a maximum size. For example: font-size: clamp(16px, 1vw + 12px, 20px). Alternatively, adjust only the base size at breakpoints and let the scale ratio calculate all other sizes automatically. A common responsive strategy is: mobile base 14-15px, tablet 15-16px, desktop 16-18px. Avoid changing the ratio itself across breakpoints, as this disrupts the visual harmony. Some designers use a smaller ratio on mobile (1.200) and larger on desktop (1.333) for more dramatic desktop headers, but this adds complexity.
References
Reviewed by Daniel Agrici, Founder & Lead Developer · Editorial policy