How many steps should a heading sit above the base?

Enough that the first heading dominates without the page looking like a poster. The defaults put it five steps above the base, which at the major third ratio gives a span of roughly three times the body size. A span readout between two and four times is the common working range for an editorial page, and interfaces tend to sit lower.

Why do smaller ratios suit interfaces?

Because an interface has more roles packed into a smaller range of sizes. A ratio of 1.2 or 1.25 gives distinguishable steps without any single size becoming disproportionate, while the golden ratio produces dramatic jumps that suit a display-led design with few levels. The ratio is the main lever on how much contrast the whole hierarchy has.

Why is the line height computed instead of set?

Because large type needs less leading than small type. The formula tightens the leading as sizes grow, from about 1.4 down towards 1.05 at the top of the scale, while body and small text hold at 1.6. Setting one value everywhere is what makes a large heading look cramped and a caption look loose at the same time.

What happens if two roles share a step?

They render at the same size, which the preview will show clearly since both rows carry their computed pixel values. That is sometimes deliberate, as with body and the sixth heading in the defaults, though a heading at body size needs to separate itself by weight or family instead. Two adjacent roles sharing a step without a reason is the commonest scale defect.

Why export the sizes as variables rather than as rules?

Because the scale is a decision about sizes, and the rules that apply them belong elsewhere. Emitting one variable per role means the sizes can be consumed by headings, components and utilities without each of them re-deriving the arithmetic, and a change to the ratio can be applied in one place. It also keeps the scale independent of the element names.

Type Scale Generator

Scale

Base font sizepx

Ratio

Each role is a step on the scale: step 0 = base, +5 = five ratio multiplications above it.

h1h2h3h4h5h6bodysmall

Body size16px

H1 size48.828px

H1 : body span3.052×

Preview

h1Type scales, exactly48.83px

h2Type scales, exactly39.06px

h3Type scales, exactly31.25px

h4Type scales, exactly25px

h5Type scales, exactly20px

h6Type scales, exactly16px

bodyType scales, exactly16px

smallType scales, exactly12.8px

CSS variables

:root {
  --font-size-h1: 48.828px;
  --font-size-h2: 39.063px;
  --font-size-h3: 31.25px;
  --font-size-h4: 25px;
  --font-size-h5: 20px;
  --font-size-h6: 16px;
  --font-size-body: 16px;
  --font-size-small: 12.8px;
}

You Might Also Need

Modular Scale Calculator

Calculate ratios for type

Fluid Type Scale Builder

Build clamp-based fluid scales

Type Hierarchy Planner

Plan headings and body sizes

Font Size Preview

Preview a font at multiple sizes

The type scale generator assigns each role on a page a step on one geometric scale, previews every role at its true size and exports the result as CSS variables. Line heights follow the usual pattern: tighter as the sizes grow.

What is Type Scale Generator?

The type scale generator takes a base size, a ratio and a step number for each role, then renders every role at its true size and writes the whole scale out as custom properties.

Eight roles are mapped: the six heading levels, body and a small size, each with its own step on the scale.
The base size runs from 10px to 24px, and the scale ratio is chosen from six named options spanning the minor third at 1.2 through to the golden ratio at 1.618.
Role steps are editable per role and clamped between minus six and ten, so a role can sit below the base as well as above it.
A role's size is the base multiplied by the ratio raised to its step, which is what makes the whole scale follow from two numbers.
The exported CSS variables are named per role and written in pixels to three decimal places, so no role depends on another through arithmetic in the stylesheet.

The defaults show how a conventional hierarchy is built: the first heading sits five steps above the base, the second four, and each level down loses one step until the sixth heading and the body share step zero, with the small size one step below. The preview is what makes the numbers arguable, because every role is rendered at its actual size in one column with its computed pixel value shown, and the line height is derived rather than fixed: a heading's leading falls as its size grows, from around 1.4 at the smaller steps towards 1.05 at the top, while body and small text hold steady at 1.6. That pattern exists because large type needs proportionally less leading than small type, and hard-coding one value across a scale is the usual way a heading ends up looking cramped at the top of the ladder. The span readout reports the ratio between the first heading and the body, which is the single number that describes how dramatic the scale is.

The exported sizes are in pixels, so a rem-based or fluid system has to convert them.
Line heights are computed by a formula rather than set per role, so a role needing unusual leading has to be overridden afterwards.
The scale is geometric only, so a scale built on two interleaved ratios is not representable.
Steps are clamped, and a value outside the range is silently reduced to the nearest bound rather than rejected.
Nothing checks whether two adjacent roles are actually distinguishable at their rendered sizes, which is a judgement the preview supports rather than automates.

Use it when a page's hierarchy is being defined from scratch, when an existing set of sizes needs checking against a single ratio, or when the number of distinct sizes is being reduced. The span readout is the quickest summary of how the scale will feel. Where the arithmetic itself has to be inspected step by step, the modular scale calculator shows the table of multipliers, and where the scale has to be fluid across viewports, the fluid type scale builder turns the same steps into clamp values. The modular scale calculator shows the underlying table, the fluid type scale builder makes the scale responsive, and the font size preview converts the resulting sizes into rem and points.

How to use Type Scale Generator

Set the base size and choose the ratio, which immediately rescales every role in the preview.
Adjust the step number for each role, watching the preview column as each one moves at its true size.
Check that adjacent roles are still distinguishable, since two roles sharing a step will render identically.
Read the span readout for the heading-to-body ratio, then copy the variables into the stylesheet.

When to use Type Scale Generator vs related tools

Reach for it when a hierarchy is being built from scratch, when a set of sizes that grew ad hoc needs reconciling against one ratio, or when the number of sizes has to be reduced without losing the levels. For the underlying arithmetic the modular scale calculator shows every multiplier in a table, the fluid type scale builder derives the responsive version with clamp, and the font size preview converts the resulting sizes into rem and points for the stylesheet and the printer.

Privacy & Security

This tool runs entirely in your browser — no data ever leaves your device. There is no server round-trip, no upload, no logging, and no account required. Your input is processed locally using client-side JavaScript and is never stored, transmitted, or accessible to anyone else. When you close the tab, everything disappears.