What Is a Typography Scale?

A modular typography scale is a set of font sizes derived from a base size using a fixed ratio. Each step is the previous size multiplied by that ratio. Consistent ratios matter because they create visual harmony: random font sizes (12px, 18px, 23px, 31px) feel arbitrary; a 1.25 scale (12.8, 16, 20, 25) feels intentional. Random sizes fail at scale because you end up with dozens of one-off values that don't relate to each other. A scale gives you a system.

Choosing the Right Scale Ratio

Minor Second (1.067) and Minor Third (1.2) produce subtle steps — good for dense UIs, dashboards, and data-heavy applications where you need hierarchy without dramatic jumps. Major Third (1.25) is the common web default: enough contrast for headings vs body, not too dramatic. Perfect Fourth (1.333) and Golden Ratio (1.618) create stronger contrast — ideal for editorial, marketing, and landing pages where you want punch. Pick based on density: tighter UIs need smaller ratios; marketing and editorial can go bigger.

Typography for Design Systems

Scales pair well with CSS variables because you define the scale once and reference it everywhere: font-size: var(--text-2). That becomes a design token — a named value in your system. Typography scales improve consistency across components because every heading, body, and caption pulls from the same source. No more font-size: 17px in one place and 18px in another. The Spacing Scale Assistant applies the same principle to layout spacing.

px vs rem for Typography

rem is usually better for accessibility: it respects the user's default font size and browser zoom. Users who set a larger base font get proportionally larger type. px ignores user preferences and can lock text at a fixed size. When to use px: when you need pixel-perfect alignment with fixed assets, or in rare cases where rem causes layout issues. For typography, default to rem. Your base (e.g. 16px) maps to 1rem; scale steps become 1.25rem, 1.56rem, etc. Users who zoom or change font size get a better experience.

Typography Scale vs Fluid Type

Static scales give you fixed sizes at each step. Fluid typography uses clamp() to smoothly scale between a minimum and maximum based on viewport width. Use a static scale when your layout is responsive via breakpoints and you want predictable sizes. Use fluid type when you want type to grow smoothly with the viewport (e.g. hero headlines). The CSS Clamp Calculator helps you generate fluid values; you can combine it with scale steps as min/max boundaries.