Visualize and compare type scale ratios with live text rendering at each heading and body size.
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.
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.
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.
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.
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.
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.
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.