Visualize type scales side-by-side using different ratios (minor third, major third, golden ratio, etc.).
A type scale is a sequence of font sizes where each step multiplies the previous one by a fixed ratio. This tool builds one scale per ratio - minor third (1.2), major third (1.25), perfect fourth (1.333), golden ratio (1.618), and others - from a base size you set, and renders the scales side by side as sample text, so you judge them as headings and body copy rather than bare numbers. The surprise is how fast larger ratios compound: from a 16px base, a golden-ratio scale reaches 68px in three steps, versus 28px for a minor third. The ratio, not the base size, sets the character of the scale.
A concrete input and expected output from the current implementation.
Input
Base 16px, compare Major Third (1.25) against Golden Ratio (1.618), five steps up
Expected output
Major Third: 16, 20, 25, 31, 39 px. Golden Ratio: 16, 26, 42, 68, 110 px. Each column renders its sizes as sample text, from caption-size at the base to display-size at the top step.
Each column multiplies the previous step by its ratio, so 16 x 1.25 = 20 while 16 x 1.618 = 25.9, rounded to 26. Four steps on, compounding has separated the two scales to 39 px versus 110 px; that divergence is what the side-by-side view exists to show.
The scale is geometric: step n equals the base multiplied by the ratio n times, so 16px at 1.25 gives 20, 25, 31.25, 39.06, 48.83. Each preset ratio is a musical interval expressed as a multiplier - minor third 1.2, major third 1.25, perfect fourth 1.333, golden ratio 1.618. Because the multiplier is fixed, the gap between neighbors grows with the size, which is why large ratios produce display sizes that skip past familiar values like 24px and 48px.
Each selected ratio becomes a column of sample text at the computed sizes, sharing the same base size and step count, so differences show up as visible size differences rather than decimal points. Small steps stay close across ratios - 16px at 1.2 is 19.2, at 1.25 is 20 - while the top steps diverge sharply. Changing the base size or adding a ratio re-renders all columns, so the comparison updates in place.
No ratio is objectively right. Text-heavy sites usually sit between 1.2 and 1.333, where steps stay close enough that headings and body read as one family; 1.5 and 1.618 suit display-heavy layouts like posters and landing pages but leave sparse, jumpy body sizes. Enter your real content at your body size and judge the mid-range steps - that is the honest test.
No. A geometric scale lands where compounding lands: 16, 26, 42, 68, not 16, 24, 32, 48. If you also need round values, you are mixing a geometric scale with an arithmetic spacing grid, which is normal practice - use the scale for display and body sizes, and your spacing system for paddings and margins - but a pure ratio scale alone will not produce both.
The example and behavioral notes were checked against the browser implementation. Standards and primary references below define the relevant format, formula, or platform behavior.
Pick colors visually and convert between HEX, RGB, HSL, and CMYK formats.
Preview how screen colors translate to print with CMYK simulation and proofing.
Preview any Google Font at various sizes, weights, and with custom sample text.
Create linear, radial, and conic CSS gradients with a visual editor and code output.
Generate harmonious color palettes from a base color using color theory rules.
Simulate how colors appear to people with various types of color vision deficiency.