Last updated 28 August 2026
Why a ratio beats picking sizes by eye
A modular scale takes one base size and multiplies it repeatedly by a fixed ratio, so every step relates to every other by the same proportion. The result is a set of sizes that look deliberate together rather than arbitrary, for the same reason musical intervals sound related — the ratios are consistent. Smaller ratios like 1.125 produce gentle steps suited to dense interfaces where many sizes sit close together; larger ones like 1.5 or the golden ratio create dramatic jumps that work better for editorial layouts with few levels. The practical advice is to generate more steps than you need and then use fewer: a page rarely needs more than four or five distinct sizes, and the discipline of choosing from a fixed set is most of the benefit.
Common questions
Which ratio should I pick?
For interfaces with lots of close sizes, 1.125 or 1.2 keeps steps subtle. For editorial pages with a few strong levels, 1.333 or 1.5 gives clearer hierarchy. The golden ratio at 1.618 produces very large jumps that suit display type more than body text.
Why does it output rem as well as pixels?
Because rem scales with the reader's own browser setting. Someone who has increased their default font size for readability keeps that benefit with rem, while fixed pixel sizes silently override their choice.
How many sizes should I actually use?
Usually four or five. Generating a wider scale is useful for choosing from, but a page using eight distinct sizes tends to look unresolved rather than rich.
Should line height scale too?
Roughly inversely — larger text generally wants a tighter line height, smaller text a looser one. A common approach is around 1.5 for body text and 1.1 to 1.25 for large headings.