Preview & scale
CSS output
About type scales
A modular type scale is a set of font sizes derived from a single base size multiplied by a fixed ratio. Each step up multiplies by the ratio; each step down divides by it. Using one consistent ratio gives headings and body text a harmonious, deliberate rhythm instead of arbitrary sizes.
The ratios are borrowed from musical intervals. The famous golden ratio (1.618) is included and used here by default, alongside the perfect fourth (1.333), major third (1.25) and others. Pick whichever gives the contrast you want - larger ratios create more dramatic jumps between sizes.
Fluid type with clamp()
Enable fluid sizing to output modern clamp() values that scale
smoothly between a minimum and maximum viewport width - no breakpoints required. Each step
interpolates between a small-screen scale and a large-screen scale, so your typography grows
with the page. Drag the bottom-right corner of the preview below to watch the sizes respond across widths.
Everything runs in your browser. Turn on Save settings to keep your scale between visits (stored only on this device), or use Copy share link to send an exact scale to someone - the settings travel in the URL.