What is a modular type scale?

A modular scale derives every font size from a single base size and a fixed ratio. Each step up multiplies by the ratio and each step down divides by it, so the sizes relate to each other the way notes in a musical interval do, which the eye reads as harmonious.

Which ratio should I choose?

Smaller ratios like 1.125 or 1.2 keep headings close to body text and suit dense, information-rich layouts. Larger ratios like 1.333 or the golden ratio 1.618 create dramatic contrast and suit marketing pages with big headlines.

Why are sizes given in rem?

Rem units scale with the user's root font size, so a scale expressed in rem respects browser and accessibility settings. The tool computes rem relative to a 16px root and also shows the pixel equivalent for reference.

What is the difference between the CSS and JSON output?

The CSS output is a :root block of custom properties like --text-lg you reference with var(). The JSON output is a design-token object suitable for tools like Tailwind, Style Dictionary, or a Figma token plugin.

Is anything sent to a server?

No. The scale, the preview, and the exported code are all generated in your browser, so the tool works offline and your settings stay private.

Typographic Scale Generator

The Typographic Scale Generator builds a harmonious set of font sizes from one base size and a musical ratio, then exports them as CSS custom properties or design-token JSON. Using a consistent ratio gives your headings and body text a deliberate, professional rhythm.

How it works

Each named step sits a fixed number of positions from the base. Its size is the base multiplied by the ratio raised to that distance — positive for larger steps, negative for smaller ones:

size(step) = base × ratio^(stepIndex − baseIndex)
rem        = size / 16
steps      = xs, sm, base, lg, xl, 2xl, 3xl, 4xl   (base in the middle)

For example, with a 16px base and a major-third ratio of 1.25, the lg step is 16 × 1.25 = 20px and the xl step is 16 × 1.25² = 25px, while sm is 16 ÷ 1.25 = 12.8px.

Tips and notes

Pick the ratio to match the density of your design: editorial and app UIs read well at 1.2 to 1.25, while landing pages benefit from 1.333 or higher for bold hierarchy. Because the values are emitted in rem, they honour the user’s browser font size and stay accessible. Drop the CSS variables into your global stylesheet and reference var(--text-xl), or feed the JSON into your token pipeline so the same scale drives both design and code.