Log in Sign up free

Type Scale Generator

Create a harmonious typographic scale (major third, perfect fourth, golden ratio…) with CSS variables and fluid clamp() sizes.

Runs instantly in your browser — results update as you type.

How do I choose font sizes for headings?

Pick a base font size (usually 16 px) and a ratio, and each step is the previous size multiplied by that ratio — 16, 20, 25, 31, 39 px with a major third (1.25). The generator previews every step and writes CSS custom properties in rem, optionally as fluid clamp() values.

Which ratio?

  • 1.125–1.2 — subtle; dashboards, apps and long text.
  • 1.25 (major third) — balanced; a safe choice for most websites.
  • 1.333–1.5 — bold headings for marketing and landing pages.
  • 1.618 (golden ratio) — dramatic contrast, best with few heading levels.

Use a smaller ratio on mobile and a larger one on desktop, or let clamp() scale smoothly between them.

Frequently asked questions

Why rem instead of px?

rem respects the visitor’s browser font-size setting, which is better for accessibility.

What does fluid mean?

Sizes grow smoothly from 85% on small screens to 100% on wide screens.

Is it free?

Yes.