A type scale, and what it costs you
Larger ratios separate headings faster and run out of usable sizes sooner. The table shows where yours runs out.
A type scale, and what it costs you
size(n) = base × ration. Larger ratios separate headings faster and run out of usable sizes sooner — the table shows where yours runs out.
Rounding, and why it happens last
Every size is computed from the exact ratio and rounded only when displayed or exported. Rounding at each step compounds: five steps of a 1.25 ratio rounded to whole pixels drifts noticeably from the true value, and a scale extended later no longer lines up with the earlier one.
Sizes are given in rem as well as px because a size set in px ignores a reader who has increased their browser's font size. That is not a preference — it is the difference between a usable page and one that cannot be enlarged.
The ratio is a convention, not a law
Musical intervals and the golden ratio are used for type scales because they produce consistent, predictable spacing — not because there is evidence they are more pleasing. Nothing here is objectively correct.
What is true: a bigger ratio gives you fewer usable sizes. At 1.618 the third step up from 16px is already 68px, which is a poster headline. At 1.125 you get a lot of steps and they are hard to tell apart.
Two ratios is a common answer
A tight ratio for body-adjacent sizes and a wide one for display headings solves the problem that one ratio has to serve both. It is more to maintain and often worth it.