Type Scale

What a modular scale is

In a modular scale, each size is the previous one multiplied by a fixed ratio, so every size relates mathematically to every other one rather than being picked individually. Set a base size and a ratio, and the rest of the scale — heading sizes, body text, captions — follows from those two numbers instead of being eyeballed one at a time.

Choosing a ratio

Smaller ratios, around 1.125–1.2, suit dense interfaces where many sizes need to coexist without any one of them dominating the layout. Larger ratios, from about 1.333 upwards, suit editorial layouts with only a handful of sizes and strong contrast between them. A large ratio combined with many steps produces sizes at the extremes that nobody will actually use — generate for the layout you have, not the largest one you can imagine.

Why line height snapping matters

Why snap line height to 4px?

An unsnapped line height — size multiplied by a ratio, left as whatever decimal falls out — puts every text block on a different vertical rhythm. Two paragraphs set in different sizes end up with baselines that never line up with each other or with anything else on the page, such as an 8px or 4px spacing grid.

Snapping rounds each computed line height upward to the nearest multiple of the grid. Rounding upward, rather than to the nearest multiple, preserves the minimum line-height ratio you asked for — a line box can end up taller than requested, never shorter — while landing every line box on the grid, so vertical rhythm holds across the whole scale.

Reading the clamp() output

The Fluid tab emits a CSS clamp() for each step. The middle value is a straight line between two viewport widths — narrower than the minimum width, the size holds at its smallest; wider than the maximum, it holds at its largest. The outer two values in clamp() are exactly those endpoints, so the line can never run away outside the range you set, no matter how wide or narrow the viewport gets.

What size does the fluid output give me on mobile?

At 1280px and above, every fluid size resolves to exactly the size you previewed — so what you paste is what you saw. Below that, each size shrinks towards, but not all the way to, the step beneath it: the narrow end of every clamp is set at half a step down the same scale. That keeps the relationships between sizes intact on a small screen, rather than flattening the hierarchy the way a uniform percentage shrink would.

Frequently asked questions

Should I use px or rem?

Rem, so the scale respects the reader’s browser font-size setting. The sizes in this tool are shown in pixels because that is how designers think about type, but every format it emits ships in rem, because that is how it should ship.

Why are some sizes rounded?

Sub-pixel sizes — 13.328px, say — render inconsistently across browsers and are impossible to specify exactly in most design tools. Rounding to a whole or half pixel trades a small amount of mathematical purity for a value everyone can actually use.

Do I need every step?

No. Generate more steps than you expect to need, then ship only the ones that earn a place in the interface. A scale with a step for every possible size is not more useful than one with fewer, more deliberate choices.