Type Scale Generator

What this tool does

Type Scale Generator multiplies a base font size by a chosen ratio to produce a consistent run of sizes from caption text up to a large H1, the same approach used by most design systems. Each step shows its pixel and rem value next to live preview text, and the whole scale can be copied as CSS custom properties or a Tailwind fontSize block.

A page with ten slightly different font sizes picked by eye rarely feels organized, while a handful of sizes related by one ratio reads as deliberate. This generator multiplies a base size by that ratio raised to a step number, so every size in the scale shares the same mathematical relationship, which is exactly how modular scales work in print and interface design.

Pick a base size close to your body text, choose a ratio, and the tool lists nine steps from Caption up to H1, each with its pixel size, its rem equivalent and a live sample line rendered at that size so you can judge legibility before committing to it in code.

How to use Type Scale Generator

1. Set the Base size to the font size your body copy actually uses, usually 16 or 18 pixels.
2. Choose a Scale ratio; smaller ratios like minor second give subtle steps, larger ones like golden ratio give dramatic jumps between headings.
3. Adjust Root font size only if your project changes the default 16px root, since it controls the px-to-rem conversion.
4. Read the Preview list to check that each step still looks legible and that headings feel appropriately larger than body text.
5. Copy the CSS custom properties block into your stylesheet, or copy the Tailwind fontSize block into tailwind.config.
6. Revisit the ratio if the extremes feel too flat or too extreme once you see real preview text at each size.

Tips for better results

• A ratio between 1.125 and 1.25 suits long-form text with many heading levels, while 1.5 and up suit marketing pages with few, bold headings.
• Keep the base size tied to your actual body text so the Body row in the preview always matches what visitors read by default.
• rem values assume the root element keeps the font size you set here; changing it later shifts every step at once, which is the whole point of using rem.
• Steps below Body (Caption, Small) are easy to forget but matter for captions, footnotes and metadata, so check they stay readable at your chosen ratio.

Common use cases

• Defining a consistent heading hierarchy (H1 through H6) for a new website or design system.
• Translating a ratio picked in a design tool like Figma into ready-to-paste CSS variables.
• Generating a Tailwind fontSize config that matches a brand style guide instead of Tailwind defaults.
• Comparing how different ratios affect the jump between body text and the first heading before locking in a direction.

Common mistakes to avoid

• Picking a very large ratio for a text-heavy site, which makes H4-H6 feel arbitrary jumps rather than a smooth hierarchy.
• Hand-rounding the rem values when copying, which breaks the exact multiplicative relationship the scale relies on.
• Ignoring the Root font size field after a project sets a non-default root, producing rem values that render at the wrong size.