Modular Scale Calculator

A modular scale is a sequence of numbers that share a consistent mathematical ratio — a single multiplier that connects every value in the sequence to the one before it. In web design and typography, modular scales give you a principled system for choosing font sizes, spacing values, and layout dimensions so that every measurement feels visually related rather than arbitrary.

The concept was popularized in CSS and typography circles by designer Tim Brown, and it draws inspiration from centuries of musical theory, architectural proportion, and classical geometry. When you apply a modular scale to a website, you are essentially encoding harmonic proportion directly into your design tokens. The result is a layout that feels balanced and intentional even to viewers who cannot articulate exactly why it looks so good.

This modular scale calculator lets you set a base value (typically your body text size, most commonly 16 px), select a mathematical ratio from a palette of classical intervals — including the iconic Golden Ratio (1.618) — and instantly generate an entire scale spanning negative steps (smaller sizes) through positive steps (larger sizes). You can also add a second or third base value to create a double-stranded or triple-stranded scale, interweaving two harmonic sequences for even richer typographic variety.

The output of this calculator is immediately practical: you get pixel values for every step, their rem equivalents (pixel value ÷ 16), ready-to-paste CSS Custom Properties, and a matching SCSS function you can drop into any Sass workflow. Whether you are building a design system from scratch or refining an existing component library, a modular scale gives you a defensible, systematic foundation for all your sizing decisions.

Every value in a modular scale is calculated from the same straightforward exponential formula. The calculator applies this formula for every integer step n in the range you specify (default: −3 to 8), producing a full scale in one pass.

The rem conversion divides the pixel result by 16, matching the browser default of 1 rem = 16 px. This makes it trivial to copy scale values into CSS properties that use rem units for accessibility-friendly, user-scalable text.

Negative step numbers produce values smaller than the base, while positive steps produce larger values. Step 0 always returns the base itself (because ratio⁰ = 1), making it a natural anchor for body copy. Steps 1, 2, 3 … are used for subheadings, headings, display type, and hero text; steps −1, −2 … are used for captions, labels, and fine print.

When multiple bases are provided, the calculator computes the full formula for every base at every step, then merges and sorts all results by value. Near-duplicate values (within 0.5 px of each other) are collapsed in the display so the scale remains readable.

The ratio is the single most important decision when building a modular scale. It controls how dramatically sizes change from one step to the next. A smaller ratio creates subtle, closely spaced values — ideal for dense UIs like dashboards or data tables where you need many distinct sizes without huge visual jumps. A larger ratio creates bold contrasts between steps — perfect for editorial sites, landing pages, or marketing materials where dramatic type hierarchy draws the eye.

This calculator ships with thirteen ratio presets drawn from Western musical intervals, all of which have been used extensively in web typography:

You can also drag the slider to any custom ratio between 1.067 and 2.5 if none of the presets suit your project. Many designers fine-tune slightly below a named ratio to rein in the contrast on high-step values.

A single-base modular scale is powerful, but it only produces one value per step. For complex design systems — particularly those that need to unify two distinct type scales (for example, a heading typeface and a body typeface with different optical sizes) — you can add a second or third base value to create a multi-stranded scale.

When you click Add Base, the calculator runs the same value = base × ratio^n formula independently for each base, then merges all resulting values into a single sorted list. The effect is that between every two consecutive single-base steps you now get an intermediate value derived from the second base, giving you approximately twice the granularity without abandoning the harmonic structure.

A classic pairing is 16 px + 18 px with the Perfect Fourth ratio. The 18 px strand fills in the gaps left by the 16 px strand, producing a rich palette of sizes that all maintain a coherent proportional relationship. You can add up to three bases in this calculator. More than three bases tends to collapse the scale into a near-linear progression, losing the harmonic feel that makes modular scales valuable in the first place.

Double-stranded and triple-stranded scales are especially useful when building design tokens for a large component library where you need fine-grained spacing options (padding, gap, margin) alongside bold typographic steps, all from a single principled system.

The calculator generates two ready-to-use code blocks that you can copy directly into your project.

CSS Custom Properties are emitted in the form --ms-0, --ms-1, --ms-2, … inside a :root {} block. Each property holds the rem value (e.g., 1.0000rem) with the original px value in a comment for reference. Using CSS variables means your entire scale is defined once in one place — change the base or ratio in this calculator, paste the updated block, and every token updates automatically throughout your stylesheet.

SCSS output gives you a $ms-base variable, a $ms-ratio variable, and a concise ms($n) function that recomputes any scale step on demand. This is ideal if you prefer to reference steps semantically in Sass (e.g., font-size: ms(2)) rather than importing a long list of custom properties.

Both outputs update live as you adjust the base, ratio, and range, so you can experiment freely and copy the final result when you are satisfied. The CSS approach integrates seamlessly with design-token pipelines (Style Dictionary, Theo) and component libraries (Tailwind CSS, Chakra UI, shadcn/ui), while the SCSS output suits traditional Sass-based workflows.

Choosing a modular scale is only the first step. Applying it well to an interface requires a few additional decisions that can make or break the result.

Anchor your base to your body size. For most web projects the body text sits at 16 px (the browser default, equal to 1 rem). Setting your base to 16 px means step 0 always matches your prose, step 1 is your smallest heading, and negative steps are available for supporting text like captions and labels. If your body type is set to 18 px for readability at large viewport widths, use 18 px as your base instead.

Limit the number of steps in use. Just because the calculator generates steps from −3 to 8 does not mean you should use all of them. Most sites need only four to six distinct type sizes; spacing systems typically use six to ten distinct values. Selecting too many steps reintroduces the arbitrary feel you were trying to avoid.

Test on real content. Mathematical elegance does not guarantee visual success. Render your actual headings and body copy at scale values before finalising your choice. A ratio that looks perfect on a specimen page may feel too tight or too loose on your real content in your chosen typeface.

Combine with a responsive strategy. On smaller screens you may want to shift down by one step (e.g., use step 3 where desktop used step 4) to keep display headings from dominating a narrow viewport. CSS Clamp and fluid typography techniques can interpolate between two scale values across a viewport range, giving you smooth, scale-respecting responsiveness.