ℹ️ About this tool
Free Modular Typography Scale Calculator
Generate a harmonious set of font sizes using a mathematical ratio. Pick a base size, choose a scale ratio like the golden ratio or major third, select a font family, and instantly preview a complete heading hierarchy. Copy the CSS output and drop it straight into your project.
How to Use the Typography Scale Generator
Enter a base font size in pixels, select a scale ratio from the dropdown, choose a font family, and set how many steps you need. The tool instantly generates each heading level with its computed size and a live preview. Compare different scales side by side to find the best fit, then click Copy CSS to get ready-to-use custom properties or class definitions for your stylesheet.
Why Use This Typography Scale Tool
Consistent typography is the backbone of good design, but picking font sizes by eye leads to inconsistency. This calculator applies proven mathematical ratios so every heading level is harmoniously related to the next. It is free, needs no account, runs entirely in the browser, and saves you from guesswork every time you start a new project.
Popular Use Cases
Web designers establish a type hierarchy at the start of every project to ensure visual consistency. Front-end developers grab the CSS output and paste it directly into design-system tokens. UI teams compare a subtle minor-third scale for documentation sites against a dramatic golden-ratio scale for marketing pages. Students learning design principles see how mathematical ratios create visual harmony. Agencies standardise typography across multiple client projects by saving scale settings.
Frequently Asked Questions
What is a modular typography scale?
A modular typography scale uses a consistent ratio to calculate font sizes, creating a harmonious visual hierarchy. Instead of picking arbitrary sizes, each step is mathematically derived from a base size multiplied by a chosen ratio like the golden ratio or major third.
Which ratio should I choose?
It depends on your design. A minor third (1.2) produces subtle differences ideal for body-heavy content, while a perfect fourth (1.333) or golden ratio (1.618) creates more dramatic contrast suited for marketing pages and editorial layouts.
Can I use the output directly in my CSS?
Yes. Click the Copy CSS button to get ready-to-use CSS custom properties or class definitions. You can paste them directly into your stylesheet and reference them throughout your project for consistent typography.
What is the difference between the golden ratio and major third?
The golden ratio (1.618) produces large jumps between sizes, creating dramatic contrast suited for hero sections and marketing pages. The major third (1.25) produces gentler steps, making it better for content-heavy sites like documentation or blogs where readability matters most.
Can I use rem or em units instead of pixels?
The calculator displays values in pixels for clarity, but the CSS output uses relative units that map directly to your base size. You can easily convert by setting your root font size to the base value and treating each step as a multiple of 1rem.
Rate this tool