Modular Scale Calculator

The modular scale calculator works the arithmetic of a geometric type scale: each size is the base multiplied by the ratio raised to the step. Steps run in both directions from the base, so the table shows the sizes above and below it in one view.

What is Modular Scale Calculator?

The modular scale calculator takes a base size, a unit, a ratio and a step count, then prints a scale table covering every step from the top of the scale down to the bottom.

• The base unit can be pixels, rems or points, and the table converts each row into the other unit using a root size you supply.
• Ten named ratios are offered, from the minor second at 1.067 through the major third at 1.25 to the octave at 2, and a custom ratio can be typed for anything else.
• Steps up and down can be set from one to ten, so the table always runs symmetrically around the base rather than only upward.
• Each row reports its step label, the multiplier applied to the base, the resulting size and its conversion into the other unit.
• The readouts report the effective ratio, the full range of the scale, and the size increase produced by five steps.

The two directions are what make the table useful. Steps above the base give the heading sizes, and steps below give captions and footnote sizes, so a scale that runs from minus three to plus five can be read as a single ladder. Each row's multiplier is shown as well as the result, which is what makes the compounding visible: at a major third, one step up is 1.25 times the base, two steps is 1.5625 and five steps is 3.05, so the sizes do not increase by a constant amount but by a constant proportion. That is the property that distinguishes a geometric scale from a hand-built list of sizes, and it is also why small ratios are needed when a page carries many levels: at a ratio of 1.5, five steps above the base already place a heading at seven and a half times the body size. The custom ratio exists for the case where a project's own scale does not come from the named set.

• The table is arithmetic only: it says nothing about whether the sizes suit a layout or whether the resulting line lengths work.
• The conversion between units uses a single root size, so a document that changes its root at a breakpoint is not represented.
• Named ratios are offered as a convenience rather than as recommendations, and the custom option accepts any value above one.
• Steps are capped at ten in each direction, which keeps the table readable and bounds the largest size it can show.
• Nothing models leading, so the vertical consequence of each size has to be worked out elsewhere.

Use it when a scale has to be checked rather than chosen, when a set of sizes needs its ratios explained, or when a client asks why the heading is exactly that size. The multiplier column answers that question arithmetically. Where the steps have to be assigned to roles, the type scale generator does that mapping, and where the scale has to be fluid, the fluid type scale builder derives the clamp values. The type scale generator maps the steps to roles, the font size preview converts the sizes a second way against the browser's root, and the fluid type scale builder makes the same scale responsive between two viewports.

How to use Modular Scale Calculator

1. Enter the base size and choose the unit the design works in, then read the base row to confirm the value landed as expected.
2. Pick a ratio from the named set or type a custom value, and watch the range readout change with it.
3. Set the number of steps up and down so the table covers every size the page needs, and check that adjacent steps are distinguishable.
4. Read the multiplier column to see the compounding, then copy the sizes into the scale or into a design token file.

When to use Modular Scale Calculator vs related tools

Reach for it when a scale needs verifying rather than choosing, when the ratios behind an existing set of sizes have to be explained, or when a project's sizes have to be reconciled onto one ratio. The multiplier column makes the compounding visible, which is what makes the arithmetic arguable. For assigning steps to roles, the type scale generator does the mapping, the font size preview converts the sizes into the units a stylesheet and a printer need, and the fluid type scale builder turns the scale into a responsive one.

Privacy & Security

This tool runs entirely in your browser — no data ever leaves your device. There is no server round-trip, no upload, no logging, and no account required. Your input is processed locally using client-side JavaScript and is never stored, transmitted, or accessible to anyone else. When you close the tab, everything disappears.

Frequently asked questions about Modular Scale Calculator