Loading Techie Utils…

CSS Type Scale Generator

A modular type scale, fixed or fluid with clamp(), ready as CSS variables. Free, and runs entirely in your browser — nothing is uploaded.

About Type Scale Generator

Builds a modular type scale — each size the one below it multiplied by a ratio — and writes it as CSS custom properties, either as fixed sizes or as fluid clamp() values that grow smoothly between a small and a wide screen.

The ratio sets the character of a design. Small ratios (1.125, 1.2) suit dense interfaces where headings only need to be a little larger than body text; large ones (1.333, 1.5) give editorial pages dramatic headings. The musical names — major third, perfect fourth — come from the intervals the ratios were borrowed from.

Fluid mode is Utopia's method. Each step gets a size on the smallest screen and a size on the widest, with a straight line between: clamp(min, calc(intercept + slope·vw), max). Using a larger ratio on wide screens lets headings grow faster than body text, so small screens stay compact and large ones get real hierarchy, without a single media query.

Where it helps

  • Writes fixed or fluid sizes as ready-to-use CSS variables.
  • Fluid sizes need no media queries and scale smoothly with the window.
  • A different wide-screen ratio gives headings more room exactly where there is space for it.
  • Uses rem by default, so a reader's own font-size preference still applies.
  • Shows a live specimen of every step.

Limits

  • A scale gives sizes, not line heights, weights or spacing — those still need choosing per step.
  • Very large ratios produce enormous top steps; trim the steps up rather than using all of them.
  • Fluid text can fail WCAG 1.4.4 zoom requirements if the minimum and maximum are far apart; keep the rem term in the middle.

Frequently asked questions

Which ratio should I choose?

For apps and dashboards, 1.125–1.2. For marketing and content sites, 1.25–1.333. Anything above 1.5 is for very large display type. When in doubt, a fluid scale from 1.2 on small screens to 1.25–1.333 on large ones works for most sites.

Why rem instead of px?

rem is relative to the root font size, which the reader can change in their browser settings. Sizes in px ignore that setting, which is an accessibility problem for people who need larger text.

What does the clamp() actually do?

It picks the middle value, a size that grows with the viewport width, but never lets it go below the small-screen size or above the wide-screen one. So text is exactly the minimum on a phone, exactly the maximum on a large monitor, and proportionally in between.

Related tools

More Colors & Design tools