Typography Scale Generator

Typography Scale Generator: Build a Font Size System, Not a Pile of Numbers

Look at the CSS of a site that feels slightly off and you will usually find the same thing: font sizes of 16px, 22px, 28px, 31px, and 45px, each chosen in a different week for a different reason. Individually they are all defensible. Together they have no relationship, and the page reads as slightly incoherent without anyone being able to say why.

A type scale fixes that by deriving every size from one base and one ratio. This typography scale generator builds that set and hands you the CSS.

Two Inputs, One System

Base size is your body text in pixels — the size everything else is calculated from, and the one number you should choose for readability rather than aesthetics.

Scale ratio determines how quickly sizes grow as you move up the scale. Six presets are available:

• 1.125 — Minor second
• 1.2 — Minor third
• 1.25 — Major third
• 1.333 — Perfect fourth
• 1.5 — Perfect fifth
• 1.618 — Golden ratio

Each step multiplies the previous size by that ratio, which is what creates the visual relationship between your h3, h2, and h1.

Which Ratio to Actually Pick

The ratio controls contrast between text levels, and the right choice depends on what you are building.

Around 1.2 suits compact interfaces — dashboards, admin panels, anything dense with information where a dramatic jump between a label and a heading would waste vertical space.

1.25 to 1.333 covers most websites. Enough contrast that hierarchy is obvious, restrained enough that headings do not dominate.

1.5 and above, including golden ratio typography at 1.618, suits editorial and marketing design where you want large, confident headings and plenty of drama between levels. On a content-dense page these ratios produce headings so large they become awkward on mobile.

CSS Custom Properties, Ready to Paste

The output uses CSS custom properties rather than raw values, so your scale becomes a set of named variables you reference throughout your stylesheet. Change the base size later and every size updates together, because they are all derived from the same source rather than hardcoded in forty places.

Copy the CSS to your clipboard, or download it as a .css file to drop into your project.

A Realistic Example: A Redesign That Kept Drifting

A developer rebuilding a marketing site keeps adjusting heading sizes and never quite lands on something that feels finished. Each section looks fine alone; together the page feels uneven.

He sets his base to 17px for comfortable body copy and selects 1.25 — enough hierarchy for a marketing page without headings overwhelming the content. He copies the custom properties into his stylesheet and replaces every hardcoded font size with a variable.

The immediate effect is smaller than expected and the cumulative one is larger: nothing jumps, every heading relates to the one above it, and when the client later asks for slightly larger body text, he changes one number.

Why a Scale Beats Picking Sizes Individually

Choosing each size on its own is choosing in isolation — you are judging whether 28px looks right on that screen, that day, next to that paragraph. A ratio makes the decision once and applies it consistently, which is why designed systems feel deliberate and ad-hoc ones feel almost right.

It also ends the debate about whether a heading should be 30px or 32px. It should be whatever the scale says.

Who Uses It

Front-end developers setting up a design system. Designers establishing type hierarchy before handoff. Solo builders who want a professional foundation without a full design process. Teams standardising typography across several products. The Font Pairing Tool handles which typefaces to combine, and the Tailwind Color Generator does the same systematising job for colour.

Set Your Scale Now

Stop choosing font sizes one at a time. Pick a base and a ratio in the typography scale generator above, copy the custom properties, and let every size on your site relate to every other one.