Typography Scale Calculator

Why a Type Scale Matters

A typographic scale creates visual hierarchy through size contrast. Without one, font sizes tend to be chosen arbitrarily — 14px here, 18px there, 22px somewhere else — resulting in layouts that feel inconsistent and unpolished. A mathematical scale ensures that every size relates to every other by the same ratio, giving your UI a sense of rhythm and cohesion.

The concept comes from classical music theory, where intervals like the perfect fourth and perfect fifth produce harmonious frequency relationships. Applied to typography, the same ratios produce size relationships that feel balanced to the eye. A Minor Third (1.2) creates a subtle, compact scale suited for dense UIs. A Golden Ratio (1.618) produces dramatic size jumps — powerful for editorial and marketing pages, but often too spread out for application interfaces.

For most web projects, Major Third (1.25) or Perfect Fourth (1.333) offer the best balance: enough contrast between levels to establish hierarchy, without sizes becoming unwieldy at the large end. The right choice depends on your content density, viewport sizes, and brand personality.

How to Use the Generated Scale

Copy the CSS variables output into your :root block. Each variable corresponds to a semantic size name — --text-base is your body copy, --text-sm is secondary text, and --text-xs handles captions and labels. The larger steps (--text-xl through --text-4xl) map to heading levels.

If you use Tailwind CSS, paste the Tailwind Config output into your theme.extend.fontSize (Tailwind v3) or @theme block (Tailwind v4). This replaces the default type scale with your custom one, keeping your design system in sync with your codebase.