Modular Type Scale Generator

A modular scale sizes type by repeatedly multiplying a base size by a fixed ratio. The formula for each rung is base size times the ratio raised to the step number, so the shared ratio keeps headings and body text visually consistent.

Eight named ratios are offered: minor second 1.067, major second 1.125, minor third 1.2, major third 1.25, perfect fourth 1.333, augmented fourth 1.414, perfect fifth 1.5 and golden ratio 1.618.

Smaller ratios such as the minor third 1.2 suit dense interfaces and long lists, while larger ones like the perfect fourth 1.333 or golden ratio 1.618 create bold, editorial contrast between headings and body text.

Each rem figure is the pixel size divided by 16, the default browser root font size, rounded to four decimals. Using rem keeps your scale responsive to a reader's own font-size preference.

Pixel values are rounded to two decimal places and rem values to four. So a major third from 16 gives 20, 25 and 31.25 pixels going up, and 12.8 pixels one step down.

Step 0 is your base size itself. Positive steps climb upward for headings and hero text, while negative steps descend for small print, labels and captions.

The block at the bottom lists each rung as a variable like --step-2 with its rem value and a pixel comment. Copy it into your stylesheet and reference the variables so every size in your design comes from one scale.

Yes. Increase Steps up or Steps down at any time and the table and CSS regenerate instantly. Both fields floor to whole numbers and never go below zero, so fractional or negative entries are clamped.

No. The whole scale is computed in your browser as you adjust the inputs, so nothing is ever sent to a server.