Skip to main content
PUBLIC.INTERNET
⚡ Instant Access🔒 Privacy First🆓 Always Free📱 Works Everywhere

Typography Scale Calculator - Modular Font Size Generator

Stop guessing font sizes. This modular type scale calculator generates a mathematically consistent hierarchy of font sizes using proven ratios from music theory and the Golden Ratio. Pick a base size (commonly 16px) and a ratio (like 1.125, 1.25 Major Third, or 1.618 Golden Ratio) and you’ll get a full system from body text to headings without “does 28px feel right?” debates. The output is practical: use it for design tokens, Tailwind config, CSS variables, or SCSS so your typography is repeatable across pages and components. Ideal for documentation, landing pages, and design systems. Free, no signup, and runs locally in your browser. Method details for Type Scale Calculator - Modular Font Sizes: The generator uses deterministic layout, grid, and typography rules, tracks contrast and palette decisions, and preserves gradient/pixel/vector fidelity in the output.

Visual Preview

Generated Code

How to Generate Type Scales
  1. Set base font size - Usually 16px (browser default) or 18px
  2. Choose scale ratio - Golden Ratio (1.618), Major Third (1.25), or custom
  3. Review size hierarchy - See all heading and text sizes
  4. Export to code - Get Tailwind config, CSS custom properties, or SCSS
The Math of Harmonious Typography
Modular scales create visual rhythm: Each font size is the previous size multiplied by the ratio: size[n] = base × ratio^n. So with base 16px and ratio 1.25 (Major Third): 16px, 20px, 25px, 31px, 39px, etc. This creates consistent visual proportions, like musical intervals. 
Why ratios from music work: The Major Third (1.25) comes from the frequency ratio between musical notes C and E. Our brains perceive these mathematical relationships as harmonious, whether in sound or visual spacing. The Golden Ratio (1.618) appears throughout nature and classical architecture. 
Pro tip: Smaller ratios (1.125-1.25) work for text-heavy sites (blogs, documentation). Larger ratios (1.5-1.618) create dramatic hierarchy for marketing sites. For responsive design, use different ratios at breakpoints: 1.2 on mobile, 1.25 on desktop. This prevents massive headings on small screens.