Font Size Scale Generator
Generate a typographic scale from a base size and ratio. Preview every step live and copy CSS custom properties or a fluid clamp() variant. Runs entirely in your browser.
About the Font Size Scale Generator
The Font Size Scale Generator builds a typographic scale from a base size and a ratio. Pick a base in px or rem, choose a named ratio such as Major Third (1.250) or set your own, and decide how many steps to add above and below the base. You get a live preview at each computed size plus ready-to-paste CSS custom properties, with an optional clamp() variant for fluid sizing. Everything runs in your browser, so nothing is uploaded.
How it works
- Set the base font size and its unit (px or rem), and the root size used to convert between px and rem.
- Choose a named ratio from the list or type a custom value, then set how many steps you want above and below the base.
- Read the live preview to see each step at its real size, and switch the output between fixed CSS variables and a fluid clamp() variant.
- Click Copy to grab the generated CSS.
Features
- Named ratios (Minor Second through Octave, plus Golden Ratio) and a custom ratio input.
- Base size in px or rem, with an adjustable root size for px/rem conversion.
- Independent control of steps above and below the base.
- Live preview of every step at its computed size, using your own sample text.
- CSS custom properties output and an optional clamp() fluid variant, both with one-click copy.
Frequently asked questions
What is a type scale ratio?
A ratio is the constant multiplier between adjacent steps. Each step up multiplies the previous size by the ratio, and each step down divides by it. Named ratios like 1.250 (Major Third) or 1.618 (Golden Ratio) give consistent, proportional jumps between sizes.
Should I use px or rem for the output?
rem scales with the user's root font size, which is better for accessibility, so the CSS output uses rem. The base input accepts px or rem; the root size setting controls how px values convert to rem.
What does the clamp() variant do?
The clamp() variant produces fluid sizes that grow with the viewport between a minimum and maximum, so type scales smoothly from small screens to large ones without media queries. The minimum is computed from your maximum size, and the value interpolates with viewport width in between.
Is my data sent anywhere?
No. The scale, preview, and CSS are all generated locally in your browser. Nothing is uploaded or logged.
How many steps should I generate?
Most projects need a handful of sizes for body text, captions, and a few heading levels. Start with two or three steps below the base and four to six above, then trim to the sizes you actually use.