Tempo - Type Scale Calculator

The Complete Guide to Type Scales in Web Design

What Is a Type Scale?

A type scale is a progression of font sizes that follow a consistent mathematical ratio. Instead of choosing arbitrary pixel values for headings, body text, and captions, a type scale calculator generates a harmonious set of sizes derived from a single base value and a multiplier. This approach mirrors how musical scales work - each note relates to the others through fixed intervals, producing combinations that feel naturally balanced. In typography, using a modular scale creates visual rhythm and hierarchy that readers perceive as cohesive, even if they cannot articulate why.

Why Use a Modular Scale for Typography?

Design systems thrive on consistency. When every font size in your project is derived from the same ratio, the relationship between headings, subheadings, and body copy becomes predictable. Developers can trust the spacing tokens without second-guessing, and designers can swap ratios to explore different visual tones - a minor third (1.2) for compact interfaces, a perfect fourth (1.333) for editorial layouts, or the golden ratio (1.618) for dramatic contrast. A type scale calculator removes guesswork and ensures that your entire typographic hierarchy scales proportionally when you change the base size.

Common Scale Ratios Explained

The most popular ratios used in a type scale calculator come from music theory and geometry. The major second (1.125) produces subtle size differences, ideal for data-dense dashboards. The major third (1.25) is the most widely used ratio on the web, balancing readability with clear hierarchy. The perfect fourth (1.333) creates stronger contrast and works well for marketing pages and long-form content. The golden ratio (1.618) provides dramatic jumps between steps and is best suited for hero sections or editorial design where large display type is needed.

Fluid Typography and Responsive Scales

Modern responsive design goes beyond breakpoints. With CSS clamp(), font sizes can scale fluidly between a minimum and maximum viewport width, eliminating jarring size jumps at breakpoints. Tempo's fluid mode generates these clamp values automatically so every type step adapts smoothly from mobile to desktop. For a deeper understanding of fluid typography techniques, see the MDN documentation on CSS clamp().

Spacing Scales and Vertical Rhythm

Typography does not exist in isolation - the space between elements matters just as much as the text itself. A well-defined spacing scale, based on a small unit like 4px or 8px, ensures that margins, padding, and gaps share a common language. When both your type scale and spacing scale are generated from the same system, every component in your UI aligns to a predictable grid. This is the foundation of vertical rhythm: the principle that all elements should sit on a consistent baseline, making layouts feel orderly and intentional. Tempo pairs type and spacing tokens together so you can export a complete, production-ready design system in one step.