What Is a Typography Scale?
A typography scale (or modular scale) is a system of font sizes created by multiplying a base size by a consistent ratio at each step. Like musical harmony, it creates mathematically related proportions that look visually balanced together — making your headings, subheadings, and body text feel cohesive without manual guesswork.
Choosing the Right Ratio
A larger ratio creates more dramatic size differences between levels. Perfect Fourth (1.333) is the most popular choice for web interfaces, providing clear visual hierarchy. Major Third (1.25) feels refined and elegant, suitable for editorial or product sites. Golden Ratio (1.618) suits bold landing pages or marketing materials. For dense document content, Minor Third (1.2) keeps sizes close together and readable.
Applying the Scale
Start with 16px as your body base — the browser default. Convert px values to rem by dividing by 16, then define them as CSS custom properties (--font-h1, --font-body, etc.) for a maintainable design system. Using rem ensures the scale responds correctly when users adjust their browser's default font size, which is essential for accessibility.
Frequently Asked Questions
No. The scale is a guide, not a strict rule. You can skip steps or use only a subset — for example, only H1, H2, H3, body, and small — to keep your type system simple and practical.
Absolutely. Mobile apps often use 14px as a base; large-screen dashboards might use 18px. The proportional relationships stay consistent regardless of the base value.