Typographic Scale Calculator
Select your base body font size and choose a mathematical ratio to generate a harmonic scale for headings, body copy, and UI elements.
Scale Parameters
Live Scale Preview
Copy CSS Variables
Understanding scale levels
A scale level like H1 represents several steps up from your base document font size. By anchoring every text element to a mathematical scale level, your layout automatically inherits visual balance.
Frequently Asked Questions
What is a typographic scale?
A typographic scale is a harmonic sequence of font sizes that creates a consistent visual hierarchy. By multiplying a base body font size by a mathematical ratio (like the Golden Ratio or Major Third), you generate proportional sizes for headers and captions.
Why should I use a typographic scale calculator?
Calculators eliminate guesswork in sizing. They ensure your heading sizes remain aesthetically balanced across screen sizes, improving scanning speed and visual polish.
What is the best scale ratio for mobile?
For smaller screen sizes like mobile phones, smaller ratios like the Major Second (1.125) or Major Third (1.200) prevent headings from wrapping excessively or becoming too large.
What is the best scale ratio for desktop?
Larger screens can handle dramatic contrast. Ratios like the Perfect Fourth (1.333), Augmented Fourth (1.414), or Golden Ratio (1.618) work beautifully on desktop landing pages.