Type Scale Generator — Build a Modular Font Size Scale

Generate a semantic type scale (h1–h6, body, small, caption) from a base size and ratio, with real sample-text preview, legibility checks, and CSS/Tailwind/SCSS export.

What it does

The Type Scale Generator builds a complete, named set of font sizes — h1 through h6, body, small, and caption — from a single base size and a ratio, the way a print or editorial type system works. Instead of picking sizes one at a time and hoping they feel consistent, you set one base size and one ratio, and every step is calculated to sit in proportion to the others, with sensible default line-height, letter-spacing, and weight per step that you can override individually.

Each step previews with real sample text at its actual size, not just a number, so you can judge legibility directly rather than imagining it. Export as CSS custom properties, plain CSS classes, a Tailwind fontSize config, or an SCSS map.

How it works

Sizes are calculated with the standard modular-scale formula: each step is the base size multiplied by the ratio raised to a fixed power (headings use positive powers, small and caption use negative ones), so every step maintains the exact same proportional relationship to its neighbors. Line-height, letter-spacing, and weight get computed defaults that shift sensibly across the scale — larger headings get progressively tighter line-height and slightly negative letter-spacing, while body-sized-and-smaller text stays relaxed — and any of those can be overridden per step without breaking the underlying size calculation.

Two checks run automatically: a body-size check (warns if your base is under the commonly recommended 16px minimum), and a line-length check, which estimates characters-per-line at a container width you specify and warns if body text would read too cramped or too sprawling for comfortable reading.

The reverse-parse tool takes this in the other direction: paste in a set of sizes you already have, and it works out the base and the closest matching ratio — including a real uniformity check, not just a coincidental average. A wildly inconsistent list of sizes (say, values that don’t share any real proportional relationship) will correctly come back as low confidence rather than being forced to match the nearest preset ratio anyway.

This tool builds a static, semantic scale — h1 is always h1’s size, at every viewport width. For sizing that itself changes fluidly with the browser width across an entire scale, that’s a different problem with its own dedicated tool (the clamp() generator elsewhere on this site); this one focuses on getting the proportions right. That said, ticking “make fluid” on any individual step here will swap that one step’s fixed size for a clamp() that scales between a mobile and desktop viewport width — a lightweight convenience for the occasional step, not a full fluid-scale workflow.

How to use it

1. Set your base size (usually your body text size) and pick a ratio — or choose Custom and enter your own.
2. Scroll the live preview — each row shows real sample text at its actual computed size.
3. Click “Adjust” on any row to override its line-height, letter-spacing, or weight, or to make that one step fluid.
4. Turn on the baseline grid if you want to check vertical rhythm against a consistent line spacing.
5. Set your container width in the line-length check to see whether body text at that width reads comfortably.
6. Turn on “Compare against a second scale” to see two base/ratio combinations side-by-side before committing to one.
7. Already have a set of sizes from an existing design? Paste them into the reverse-parse box and apply the inferred scale directly.
8. Pick your export format — CSS variables, CSS classes, Tailwind config, or SCSS map — and copy.

FAQ

Which ratio should I actually use? There’s no universally correct answer — it depends on how much visual contrast you want between heading levels. Smaller ratios (minor second, major second) produce a subtle, closely-spaced scale that suits dense interfaces; larger ratios (perfect fourth, golden ratio) produce dramatic jumps that suit editorial or marketing pages. Try a few and watch the live preview.

Why does my h1 look enormous? With a large ratio (say, the golden ratio, 1.618) compounded across six steps from body to h1, sizes grow fast — that’s the nature of a geometric scale, not a bug. If h1 feels too large, either pick a smaller ratio or manually reduce how many steps separate body from h1 in your own CSS.

How is this different from the clamp() / fluid type scale tool? That tool is for a scale that itself resizes continuously as the viewport changes, built entirely around clamp(). This tool is for a fixed, semantic scale (the sizes don’t change with viewport width) with typographic controls like line-height and letter-spacing per step. The “make fluid” toggle here is a small bridge between the two, for when only one or two steps need viewport-based scaling.

My reverse-parsed sizes came back as “low confidence” — what does that mean? It means the sizes you pasted don’t share a consistent ratio between consecutive steps — some jumps are much bigger or smaller than others relative to the rest. That can happen with a genuinely hand-tuned (non-mathematical) scale, or with a mix of unrelated sizes. Low confidence isn’t necessarily wrong, it’s just telling you the fit isn’t clean.

Does the line-length check account for different fonts? It uses a standard rule-of-thumb estimate (roughly half the font size per average character) that holds reasonably well across common proportional fonts. A genuinely condensed or extended typeface will shift the real number somewhat — treat the warning as a useful signal, not an exact character count.

Can I load my own font for the preview? You can pick from a short list of common Google Fonts to preview your scale in context. It’s for visual judgment inside this tool only — it doesn’t affect the exported CSS, which is font-agnostic by design.