What is a modular scale?

A modular scale is a sequence of values — usually font sizes or spacing steps — produced by repeatedly multiplying a single base value by a fixed ratio. Because every step is a precise multiple of the previous one, the resulting sizes feel visually related and rhythmically consistent, the same way notes in a musical scale sound related.

Which ratio should I choose?

The Perfect Fifth (3/2 = 1.500) is the most popular choice for web typography: the interval between consecutive steps is big enough to be clearly distinct while still leaving room for many intermediate heading levels. The Golden Ratio (1.618) produces bolder contrasts. For tight spacing systems (e.g. design-token spacing) the Major Second (1.125) or Minor Third (1.2) create denser, more granular scales.

How is each step value calculated?

The formula is value(n) = base * ratio^n, where n is the signed integer step index. Step 0 always equals the base. Step +1 equals base * ratio, step +2 equals base * ratio^2, and so on. Step -1 equals base / ratio (i.e. base * ratio^-1), producing smaller sizes for captions and labels.

What is the difference between rem and em output?

Both rem and em values are computed by dividing the pixel value by a reference font-size. For rem that reference is the root element font-size (typically 16px); for em it is the current element font-size. If you leave the reference at 16px the numeric output is identical, but rem values are always relative to the document root while em values cascade with the element context.

Why are musical interval names used for type ratios?

The analogy was popularised by Tim Brown of Typekit in his 2011 essay "More Meaningful Typography." Musical intervals describe the frequency relationships between notes; those same mathematical ratios — like 3/2 for a perfect fifth — happen to produce spacing relationships that the human eye perceives as harmonious, likely because they are ratios the auditory system is already tuned to detect.

Can I use this for spacing and not just font sizes?

Absolutely. A modular scale works for any one-dimensional measurement — line-heights, spacing tokens, border-radii, icon sizes, or even grid column widths. Set the base to your smallest meaningful unit (e.g. 4px) and pick a gentle ratio like the Major Second (1.125) or Minor Third (1.2) for a dense, consistent spacing system.

Modular Scale Calculator

A modular scale calculator generates a mathematically harmonious sequence of sizes — most commonly used for typography — by starting from a single base value and multiplying it by a fixed ratio at each step. The resulting sizes feel visually related because they share the same mathematical relationship, the same principle that makes notes in a musical scale sound like they belong together.

How it works

The core formula is simple:

value(n) = base × ratio^n

base is your starting size (typically 16 px, the browser default body text size).
ratio is a multiplier greater than 1 — for example 1.5 for a Perfect Fifth.
n is the signed step index: 0 equals the base, positive integers go up (larger sizes for headings), negative integers go down (smaller sizes for labels and captions).

Every named ratio in the selector corresponds to a classical musical interval. The Perfect Fifth (3:2 = 1.500) means the frequency of the higher note is exactly 1.5 times the lower one. Applied to type, it means each heading level is 1.5 times larger than the one below it.

Worked example

Suppose you set base = 16 px and ratio = Perfect Fifth (1.500):

Step	Formula	Value
-2	16 × 1.5^-2	7.11 px
-1	16 × 1.5^-1	10.67 px
0 (base)	16 × 1.5^0	16.00 px
+1	16 × 1.5^1	24.00 px
+2	16 × 1.5^2	36.00 px
+3	16 × 1.5^3	54.00 px
+4	16 × 1.5^4	81.00 px

These map naturally to: micro labels, small captions, body text, large body / lead, subheading, section heading, page title, hero heading.

If your root font-size is 16 px, step +2 (36 px) converts to 2.25 rem — convenient for a CSS custom property or Tailwind fontSize entry.

Formula note

Because ratio^n is an exponential function, steps increase faster at larger n. This is intentional: the perceptual difference between 16 px and 24 px feels similar to the difference between 54 px and 81 px because human perception of size is roughly logarithmic (Weber–Fechner law). A modular scale therefore produces steps that appear equally spaced to the eye even though the absolute pixel differences grow.

The calculator also shows the binary logarithm of the ratio (log₂(ratio)), which tells you how many semitones the ratio is equivalent to in an equal-tempered 12-tone scale. For the Perfect Fifth that is approximately 7 semitones; for the Golden Ratio it is about 0.694 octaves.

Choosing a ratio

Minor Second (1.067): Very small steps — useful for dense spacing tokens or tight line-height ladders.
Major Second (1.125): Still compact, popular for spacing systems.
Minor Third (1.200): Moderate contrast, works well for both type and spacing.
Major Third (1.250): A classic choice for sites needing a confident but not dramatic type ramp.
Perfect Fourth (1.333): Strong contrast between heading levels; popular in editorial design.
Perfect Fifth (1.500): The most widely recommended for web typography; easy to scan heading hierarchy.
Golden Ratio (1.618): High drama; works best for landing pages with few heading levels.
Octave (2.000): Each step doubles the previous — creates very bold hierarchies with only 3–4 usable steps.

Exporting the scale

The tool generates ready-to-paste code in three formats:

CSS custom properties — paste into :root {} and reference with var(--text-+3) etc.
Tailwind config — paste into theme.extend.fontSize in tailwind.config.js.
SCSS variables — use $text-p3 (positive step) or $text-n2 (negative step) throughout your stylesheets.