Generate a modular type scale with configurable base size, ratio, and CSS custom property output.
A modular type scale is one multiplication repeated: pick a body text size and a ratio, and every heading, caption, and label is that product applied step by step. This tool turns those two numbers into a full set of CSS custom properties, with sample text at each size so the rhythm can be judged before pasting. The surprise for most people: the golden ratio is not the right default. At a 16px base, 1.618 sends the second step to about 26px and the third past 42px; for most interfaces 1.25 or 1.333 keeps headings large without stranding body text.
A concrete input and expected output from the current implementation.
Input
Base 16px, ratio 1.25 (major third), steps -2 to +6
Expected output
-2: 10.24px | -1: 12.8px | 0: 16px | 1: 20px | 2: 25px | 3: 31.25px | 4: 39.06px | 5: 48.83px | 6: 61.04px
Each step multiplies the previous one by the ratio: 16 x 1.25 = 20, 20 x 1.25 = 25, and so on up to 61.035 rounded to 61.04. Below the base, division gives 12.8 and 10.24. Two-decimal rounding is why 39.0625 appears as 39.06.
Step 0 is the base size, usually the body text. Each step above multiplies the previous one by the ratio: step 1 is base times ratio, step 2 is base times ratio squared. Steps below the base divide instead. With base 16 and ratio 1.25 the upward run is 20, 25, 31.25, 39.06, 48.83, 61.04; downward, 12.8 and 10.24.
Every computed size becomes a custom property, emitted in px and rem: a rem value is the px value divided by the root font size, so 31.25px is 1.9531rem on a 16px root. The tool renders sample text at each step so the visual rhythm can be judged before copying; the pasted block of properties then supplies every text size the stylesheet needs.
There is no best ratio. Dense interfaces and long documents read well at 1.2 to 1.333, where headings stay proportional to body text; marketing and editorial pages can take 1.5 or 1.618, which gives dramatic display sizes but few usable middle steps. Generate the scale, look at the preview, and switch until the rhythm fits.
Yes. Rounding to whole or half pixels is standard practice and the difference is not perceptible, because what matters is the proportion, not the exact value. If you round, do it once in the token definitions rather than in each usage, and treat the scale as a starting grid you can deliberately break.
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.