A modular scale is a sequence of harmoniously related type sizes (typically 12px, 16px, 21px, 28px, etc.) derived from a ratio like the golden ratio or musical intervals. Using a predefined scale ensures visual consistency and reduces decision fatigue when setting headlines, body text, and captions.
Use tools like Modular Scale (modularscale.com) to generate a scale, then apply it to a web or print project. Compare designs using modular scales vs. arbitrary type sizes.
You already know from typography fundamentals that type size choices affect readability, mood, and visual rhythm. The problem is that choosing sizes ad hoc — 14px here, 17px there, 36px for the headline — quickly produces a design that feels subtly off, even if no single choice is obviously wrong. A modular scale solves this by generating all your type sizes from a single base size and a consistent ratio, the same way musical intervals produce notes that sound harmonious together.
The mechanics are straightforward. Pick a base size (often 16px, the browser default) and a ratio. The golden ratio (1.618) is a popular choice — you've encountered it in design already — but other ratios work just as well: the perfect fourth (1.333), the perfect fifth (1.5), or the major third (1.25). Multiply the base by the ratio to get the next size up; multiply again to get the size above that; divide to get sizes below. With a 16px base and a 1.5 ratio, your scale becomes roughly 7px, 11px, 16px, 24px, 36px, 54px. Every size on the scale is mathematically related to every other, which is why the proportions feel cohesive when applied to a layout.
In practice, you assign scale steps to roles: body text sits at the base, subheadings one or two steps up, main headings further up, and captions or labels one step down. This creates a type system — a reusable set of decisions rather than one-off choices. The benefit compounds as a project grows: when every designer and developer draws from the same scale, the design stays visually consistent without anyone needing to debate whether 18px or 20px is the right subheading size. The scale has already decided.
One common stumbling point is treating the scale as law rather than scaffolding. If a particular step on your scale produces a size that's too close to the one above or below it, adjust. If your design needs an intermediate size for a specific context — a pull quote, a navigation label — you can interpolate or round to the nearest half-step. The goal is proportional harmony, not rigid obedience. The scale gives you a starting point and a shared language; your eye and the content's needs do the final tuning.
Topics in reflective domains aren't scored by quiz answers. Read, reflect, and mark when you've thought it through.