Typographic Scale Generator

In short A modular scale multiplies a base size by a fixed ratio to generate every other size: at 16px with a ratio of 1.25, the steps are 20, 25, 31.25, 39 and so on upward, and 12.8, 10.24 downward. The point is not mathematical purity — it is that a page with five arbitrary font sizes looks accidental while a page built on one ratio looks intentional, and picking sizes from a fixed set removes the decision entirely. The ratio is a stylistic choice with a practical consequence. Small ratios like 1.125 or 1.2 give many closely related sizes, which suits dense interfaces and documentation. Large ratios like 1.5 or 1.618 give dramatic contrast and few usable steps, which suits marketing pages and falls apart in a settings screen. 1.25 is the common default because it survives both. Two things to check before shipping the output. Round the values — 31.25px is not more precise than 31px, it is just harder to read in a stylesheet. And use `clamp()` for the large sizes, because a scale that works on a desktop heading will overflow a phone: `clamp(2rem, 5vw, 3.5rem)` lets the top of the scale shrink while the body text stays put.