Why is the base size the H6 size?

Because headings usually grow from the smallest one. Anchoring the ladder at H6 means the base is a value the page already uses somewhere, and the display sizes are the furthest away from it. Anchoring at H1 would make every other heading a division, which is harder to reason about when the ratio changes.

What does the mobile floor actually change?

It sets the minimum a heading may shrink to. The exported clamp keeps the desktop size as the ceiling, sets the floor at the desktop size multiplied by the factor, and lets the middle term move between them as the viewport changes. On a phone the headings sit at or near the floor, and the hierarchy stays proportional.

Why does a tight ratio collapse at the bottom of the ladder?

Because the steps are multiplied, and a small ratio compounds. At 1.125 the difference between two adjacent low levels can fall below a pixel of rendered size, which reads as inconsistency rather than hierarchy. Either widen the ratio or drop a level, since a heading that cannot be distinguished is not a level.

Is the middle term of the clamp a real ramp?

Not exactly. It is a linear expression built from 75 per cent of the desktop size plus 1.4 viewport widths, which is a reasonable approximation rather than a line drawn between two known sizes at two known viewports. When the ramp has to pass through specific sizes at specific widths, calculate it properly with the clamp calculator.

Can I use different ratios for different levels?

Not here, since the ladder is built from one ratio. In practice editorial designs often want a larger jump between the first two levels and smaller ones below, and that has to be done by editing the exported declarations. The tool's single-ratio view is the baseline to deviate from with intent.

Heading Scale Visualizer

Scale

Base (H6) sizepx

Ratio

Mobile floor× base

Sample text

Tag	Multiplier	Desktop	rem	Mobile floor
h1	base × 3.0518	48.83px	3.0518rem	38.09px (mobile)
h2	base × 2.4414	39.06px	2.4414rem	30.47px (mobile)
h3	base × 1.9531	31.25px	1.9531rem	24.38px (mobile)
h4	base × 1.5625	25px	1.5625rem	19.5px (mobile)
h5	base × 1.25	20px	1.25rem	15.6px (mobile)
h6	base × 1	16px	1rem	12.48px (mobile)

H6 is the base; each step up multiplies by the ratio. Mobile floor is 0.78× the desktop size.

Rendered ladder

h1Section heading

h2Section heading

h3Section heading

h4Section heading

h5Section heading

h6Section heading

clamp() ladder

h1 { font-size: clamp(2.38rem, 2.289rem + 1.4vw, 3.0518rem); }
h2 { font-size: clamp(1.904rem, 1.831rem + 1.4vw, 2.4414rem); }
h3 { font-size: clamp(1.523rem, 1.465rem + 1.4vw, 1.9531rem); }
h4 { font-size: clamp(1.219rem, 1.172rem + 1.4vw, 1.5625rem); }
h5 { font-size: clamp(0.975rem, 0.938rem + 1.4vw, 1.25rem); }
h6 { font-size: clamp(0.78rem, 0.75rem + 1.4vw, 1rem); }

You Might Also Need

CSS Typography Token Generator

Export CSS type tokens

Type Scale Generator

Generate a modular type scale

Fluid Type Scale Builder

Build clamp-based fluid scales

CSS Clamp Calculator

Calculate clamp() values

The heading scale visualizer builds an H1 to H6 ratio ladder from a base size and puts a mobile floor under it. It also writes the clamp declaration for each level, so the hierarchy survives on a phone without a second scale being maintained.

What is Heading Scale Visualizer?

The heading scale visualizer derives all six heading sizes from one base value and one ratio, then exports each one as a clamp declaration that holds the hierarchy on a narrow screen. The base is the H6 size, which means the ladder is anchored at the bottom rather than the top.

The construction is a ratio ladder: H1 is the base multiplied by the ratio raised to the fifth power, H2 by the fourth, and so on down to H6, which is the base exactly. That leaves the largest heading five multiplications away from the smallest, which is why the ratio matters more here than anywhere else in a type system. Six ratios are offered, each with a different character.

1.125 is tight and suits a dense interface where headings are labels rather than statements.
1.2, the minor third, is a gentle ladder for content-heavy pages with many heading levels in view at once.
1.25, the major third, is the default and the usual compromise between presence and compression.
1.333, the perfect fourth, gives headings a clear step up without the display sizes getting unwieldy.
1.5, the perfect fifth, is the editorial choice, where H1 is allowed to be genuinely large and the lower levels stay modest.
1.618, the golden ratio, produces the most dramatic spread and needs long-form content to justify it.

The mobile floor is the second control, and it is expressed as a multiple of the desktop size rather than as a separate scale. Each heading's exported declaration is a clamp whose lower bound is the desktop size times the floor factor — 0.78 by default, adjustable from 0.5 to 0.95 — whose upper bound is the full desktop size, and whose middle term is a fixed linear expression of 75 per cent of the desktop size in rem plus 1.4 viewport widths. The result is one rule per heading that grows with the viewport and stops at a floor and a ceiling, which is what keeps an H1 readable on a phone without shrinking the rest of the hierarchy out of proportion.

The table shows the multiplier, the desktop size in pixels and rem, and the mobile floor for each level, so a ladder that collapses at the bottom is visible before the CSS is copied: at a tight ratio the difference between H5 and H6 can fall under a pixel of rendered size, which is a hierarchy in name only. The limits of the generated ramp are worth knowing before the declarations ship.

The middle term is a linear approximation rather than a line drawn between two known sizes at two known viewports, so a ramp that has to pass through exact values belongs in a clamp calculator.
The same ratio applies to every level, where an editorial design often wants a larger jump between H1 and H2 and a smaller one further down.
The exported rem values assume a sixteen-pixel root, so a project that changes the root size shifts every heading with it.
The ceiling is the desktop size, which means very wide screens stop growing rather than continuing to scale.
Nothing checks the result against a line length, so a display heading on a short line may still need a step down by hand.

Used as a first pass, the ladder removes the guesswork from six headings at once; the deviations are then deliberate rather than accidental.

How to use Heading Scale Visualizer

Set the base size, remembering that it is the H6 size and that every other heading is derived upward from it.
Pick a ratio and read the table, checking that neighbouring levels at the bottom still differ enough to be seen.
Set the mobile floor and compare the desktop and floor columns, since the floor is what a phone will show.
Enter the sample text, read the rendered ladder, then copy the clamp declarations into the stylesheet.

When to use Heading Scale Visualizer vs related tools

Reach for it when a heading hierarchy has to be established across breakpoints in one pass, when H5 and H6 have collapsed into the same effective size, or when a design needs to move from a fixed ladder to a fluid one without redoing the ratio choice. The mobile floor is the part that saves a second scale. For the same sizes as design tokens, the CSS typography token generator exports them as custom properties, the type scale generator builds the underlying scale, and the line height optimizer gives each level a leading that matches its size.

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.