Type Scale Visualizer

Visualize and compare type scale ratios with live text rendering at each heading and body size.

Tested tool guide Tested browser tools Checked August 16, 2026

What Type Scale Visualizer does, with a checked example

Enter a base font size and a ratio, and the tool generates a modular scale - each step multiplies the previous one by the ratio - then renders sample text at every step, so you judge sizes as actual type. The surprise is that steps grow by proportion, not fixed pixels: from a 16 px base at 1.25, the gap from 16 to 20 is 4 px, but from 61 to 76 it is about 15 px. A ratio that looks calm at body size can produce enormous display sizes, so the top of the scale changes most when you nudge the ratio.

Worked example

A concrete input and expected output from the current implementation.

Input

Base 16 px, ratio 1.25 (major third)

Expected output

The scale rendered as live text at every step: 10.24, 12.8, 16, 20, 25, 31.25, 39.06, 48.83, 61.04 px, from small caption text up to a display size, each line set at its computed size.

Each step multiplies the previous by 1.25: 16 x 1.25 = 20, 20 x 1.25 = 25, 25 x 1.25 = 31.25, and so on to 61.04; dividing 16 by 1.25 gives 12.8, then 10.24. Values are shown rounded to two decimals.

How the result is produced

Generating the scale

The base size and the ratio are the only inputs that matter: each ascending step is the previous step multiplied by the ratio, and each descending step divides by it. The ratio presets carry musical names - 1.125 major second, 1.25 major third, 1.333 perfect fourth, 1.618 golden ratio - and the same base and ratio always produce the same scale.

Live rendering

Every step is rendered in the browser as real text set at its computed size, with heading-style and body-style samples, so you compare visual weight and hierarchy, not a list of pixel values. Because the sizes come from repeated multiplication, most are fractional - 31.25 px, 39.06 px, 48.83 px - and they do not land on integer pixels or on a spacing grid unless you round them.

Good uses

Choosing a ratio for a new design system: set your body size as the base, flip through 1.125, 1.25, and 1.333, and watch the rendered headings to pick the ratio whose display sizes suit your content before any values go into CSS variables.
Auditing existing CSS: with body text at 16 px and headings at 24, 32, and 40 px, try base 16 against several ratios to see how close a clean modular scale comes to your current sizes, and which steps you would need to change.
Planning rem-based typography: compare candidate root sizes such as 16, 18, and 20 px at the same ratio and check which steps land on values that fit the 4 px or 8 px spacing grid, so headings share a rhythm with spacing.

Limits and checks

The fractional sizes are the tool working as designed, not a bug. A 1.25 ratio from 16 px gives 31.25 px and 39.06 px, not 32 and 40; rounding to whole pixels makes the steps uneven and quietly destroys the proportion you chose.
Ratio names are conventions, not recommendations. The golden ratio (1.618) from a 16 px base reaches 41.89 px in two steps and 109.66 px in four - right for editorial pages, wrong for dense app UI. The right ratio depends on your base size, content, and measure, not on the name.
The scale is only sizes. The tool renders heading-style and body-style samples, but nothing about the ratio determines line height, letter spacing, or measure; two pages on the identical scale can read completely differently, so treat the output as the start of a type system, not the system itself.

Common questions

What ratio should I start with?

There is no objectively correct ratio; the value depends on your base size and content. Common starting points are 1.25 (major third) for UI-heavy sites with modest display sizes, and 1.333 (perfect fourth) or 1.5 for editorial layouts that want bigger headings. Start at 1.25 from a 16 px base and compare the rendered headings at 1.333 before committing.

Should I specify the scale in px or rem?

Both work and they behave differently. px is absolute; rem is relative to the root font size, so the whole scale grows when the root grows, including when a user sets a larger browser default. A common setup keeps the root at the browser default of 16 px, enters 16 as the base, and writes the scale in rem so one change rescales everything.

References and verification

The example and behavioral notes were checked against the browser implementation. Standards and primary references below define the relevant format, formula, or platform behavior.