Typography Scale Calculator

How the Typography Scale Calculator Works

This calculator generates a set of harmonious font sizes by applying a mathematical ratio to a base size. The concept borrows from music theory: just as musical intervals follow mathematical relationships to produce pleasing harmonies, typographic scales use ratio-based progressions to create visual rhythm and hierarchy in text.

Starting from your base font size (typically 16px for body text), each step up multiplies by the chosen ratio, and each step down divides by it. A Perfect Fourth ratio of 1.333 starting from 16px produces sizes like 21.33px, 28.43px, 37.90px ascending and 12px, 9px descending. These sizes feel naturally related because they share a common proportional foundation.

Choosing the Right Scale Ratio

The ratio you choose depends on how much contrast you want between text sizes. Smaller ratios like Minor Second (1.067) produce very subtle differences between steps, suitable for dense interfaces like admin panels or data dashboards where many text sizes need to coexist in small spaces. Larger ratios like Perfect Fifth (1.5) or Golden Ratio (1.618) create dramatic jumps between sizes, perfect for editorial layouts and marketing pages where strong visual hierarchy guides the reader through content.

Major Second (1.125) and Minor Third (1.2) are popular defaults for web applications because they provide clear hierarchy without extreme size differences. Perfect Fourth (1.333) is the most commonly recommended starting point for general web design, offering a balanced progression that works for both headings and interface elements.

The Role of Line Height

Line height (or leading) controls the vertical spacing between lines of text. While this calculator applies a uniform line height value, in practice larger text benefits from tighter line heights and smaller text from looser line heights. A heading at 48px typically looks best at 1.1 to 1.2 line height, while 14px body text reads more comfortably at 1.5 to 1.7. Use the generated scale as a starting point, then fine-tune individual line heights for each size.

Using Rem for Responsive Typography

The calculator outputs both pixel and rem values. Rem units are relative to the root element font size and automatically scale when users adjust their browser text size settings. This makes rem the preferred unit for accessible typography. Set your base size on the html element, then use the rem-based CSS variables throughout your stylesheet.

Integrating with Design Systems

A well-defined type scale is the foundation of any design system. The generated CSS variables can be dropped directly into your project and referenced as semantic tokens. Map your scale steps to meaningful names: --text-xs for captions, --text-sm for helper text, --text-base for body, --text-lg through --text-4xl for headings. This naming convention matches Tailwind CSS conventions and is familiar to most front-end developers.

Privacy

All calculations run in your browser using JavaScript. No data is sent anywhere. The tool works offline once loaded.