Choosing a modular scale ratio for your interface
How to pick between a minor third, major third, perfect fourth and the golden ratio, and how base size and step count shape the result.
What the ratio actually controls
The ratio is the constant gap between one size and the next, applied as repeated multiplication rather than fixed addition. A ratio of 1.2 grows each step by twenty percent, so 16 becomes 19.2 then 23.04, while a ratio of 1.5 grows by half each time, turning 16 into 24 then 36. Larger ratios open up faster, producing dramatic jumps between a heading and body copy. Smaller ratios keep neighbouring sizes close, which reads as calm and understated.
Matching the ratio to the product
Data-heavy screens such as admin panels, tables and dashboards usually want a tight ratio like the minor third 1.2 or major third 1.25, so many nearby sizes can coexist without wild gaps. Marketing pages, blogs and editorial layouts can afford the drama of a perfect fourth 1.333 or the golden ratio 1.618, where a large headline sits far above the body text. If a scale feels too jumpy or too flat, the ratio is almost always the first dial to turn.
Base size and step count
The base size anchors the whole scale and is normally 16 pixels because that is the browser default and a comfortable reading size. Steps up decide how many heading tiers you generate, and steps down create the smaller sizes for captions, labels and legal text. It is common to need only two or three steps up but one or two down, since interfaces rarely use many tiny sizes. Because the tool clamps both counts to whole numbers of zero or more, you can dial them freely without breaking the output.
From scale to CSS variables
Once the numbers look right, the generator writes each rung as a CSS custom property such as --step-1 with its rem value and a pixel comment for reference. Dropping that block into your root stylesheet lets you reference sizes by name instead of hardcoding pixels, which keeps the design consistent and easy to retune later. Because the values are in rem, they scale with the user's browser setting, supporting readers who increase their default font size. Changing the base or ratio then updates the entire type system from a single source.