Typography Scale

A Typography Scale is a systematic approach to determining the relative sizes of text elements within a design, such as headings, subheadings, and body text. It establishes a consistent typographic hierarchy by defining a series of font sizes that create visual balance and rhythm. The scale is often based on predefined ratios (e.g., golden ratio or major third) to ensure a harmonious layout and improve readability.

A typography scale is what prevents the 'too many font sizes' problem that makes dashboards and documents look visually noisy. When your product uses 12, 13, 14, 15, 16, 18, 20, and 24px text sizes, nothing has clear hierarchy — everything competes. A disciplined scale with 5-6 sizes (each with a clear semantic meaning: page title, section header, body, label, caption) creates visual order that users navigate intuitively without needing to consciously read every heading.

beehiiv's typography editor shows headings and body styles in a single panel with a live preview alongside — a type scale system that ensures consistent hierarchy across every newsletter and site page without per-element decisions.