Build a modular type scale from a base size and ratio, with rem values and a fluid clamp() for each step

Modular type scaleFreeFor designers and developers

15 min

saved on a typical run. Our estimate, against building the scale and its clamp() formulas in a spreadsheet.

Before: what you give it

The example input, as typed in. You type in numbers or values.

base: 16
ratio: perfect fourth
stepsUp: 5
stepsDown: 2

After: what comes back

The first lines of a real run on that input. Nothing here is edited by hand.

Modular scale: base 16px, ratio 1.333 (perfect fourth), root 16px

step  5    67.34px   4.209rem  4x-large
step  4    50.52px   3.157rem  3x-large
step  3     37.9px   2.369rem  2x-large
step  2    28.43px   1.777rem  x-large
step  1    21.33px   1.333rem  large
step  0       16px       1rem  base
step -1       12px    0.75rem  small
step -2        9px   0.563rem  x-small

Fixed custom properties:
/* perfect fourth (1.333), base 16px, fixed */
:root {
... full output on the tool page

What you get

Every step in px and rem, a clamp() per step, and fixed and fluid CSS custom properties

What it cannot do

Ratio names are a web convention, not a law; ratios run from 1.01 to 4 and up to 12 steps above the base.

Who it is for

Designers
Developers

Free and Pro

Free	25 runs a day per IP address.
Pro	No daily limit, 300 requests a minute.

What each plan includes

Use it from your assistant

The tool is called modular_scale. Connect the server once, then ask for it by name or just describe the job. Install steps for each app.

claude mcp add --transport http designers https://designers.allthepossibles.com/mcp

curl -X POST https://designers.allthepossibles.com/api/modular-scale -H 'content-type: application/json' -d '{"base":16,"ratio":"perfect fourth","stepsUp":5,"stepsDown":2}'

Try it here

The form starts with the same example input, so you can run it first and then swap in your own.

Base pxRatioSteps up