Modular type scales solve a recurring headache in design systems: choosing font sizes that feel harmonious rather than arbitrary. Instead of picking numbers by feel (13px, 15px, 18px, 24px), a modular scale multiplies a single base size by a fixed ratio at each step. The result is a set of sizes that share a geometric relationship, so small text, body copy, subheadings and display headings all belong to the same family rather than drifting apart.

The generator opens pre-loaded with a Major Third scale: ratio x1.250, 16 px base, five steps above and two below. This produces 10.24 px, 12.80 px, 16.00 px, 20.00 px, 25.00 px, 31.25 px and 39.06 px. That is the scale behind Tailwind's default font-size table and Material Design's body-through-headline stack. Adjusting the ratio chip, the base slider, or the step counts regenerates every row and every output block instantly.

How to Use the Scale Builder

1. Click a ratio chip. Major Third is the safe default; Perfect Fourth gives larger jumps suited to editorial layouts; Golden Ratio (x1.618) is dramatic and best kept for landing pages where a single hero headline dominates.
2. Drag the Base size slider to match your body copy size. Most interfaces use 16 px (the browser default); dense data UIs sometimes drop to 14 px; print-derived layouts often start at 18 px.
3. Set Steps above to the number of heading levels you need. Five covers xs through 2xl in one pass. At ten steps the largest size will overflow most containers before it reaches the top of the list, so the slider caps there.
4. Choose an Output unit: rem for browser-zoom accessibility (recommended), em for component-scoped scaling, px for design files or Figma tokens.
5. Click a format tab (CSS variables, Tailwind fontSize config, SCSS variables, or a Markdown table), then press Copy to paste into your project.

The Formula Method Behind Each Step

Every size is base x ration where n is the step number relative to zero (the base). Step +1 multiplies once; step -1 divides once; step +3 multiplies three times. At Major Third (x1.250), step +5 above 16 px is 16 x 1.250&sup5; = 48.828 px and step -2 is 16 / 1.250² = 10.240 px. The rem values divide the px result by 16. If your root font size differs from 16 px, adjust the base slider before copying the output.

Accuracy and Limits Worth Knowing

The Custom chip accepts any decimal between 1.001 and 3.0. Values at or below 1.0 are rejected with the message “Ratio must be greater than 1.0”; the Apply button stays disabled until the value is valid. Values above 3.0 trigger a warning: “Ratio above 3.0 produces extreme size jumps”. At that multiplier, step +3 is already 27x the base, making the upper end of the scale unprintable on most screens. Each row in the scale table has its own copy button for patching a single token in an existing design system without regenerating the whole file.