What ratio should I use?

Something near 1.2 at the small end and 1.25 to 1.333 at the large end is a common starting point. The preview matters more than the number.

Why are negative steps named step-n1?

A literal minus would produce step--1, which reads as a malformed custom property. The n prefix keeps the names valid.

Can I output this for Tailwind?

Yes, as a v4 @theme block or a v3 config object, as well as plain custom properties.

How does it handle small caption sizes?

Negative steps (step-n1, step-n2) apply inverse ratios to gracefully scale down footers, captions, and badges.

Fluid type scale generator

A type scale built on one ratio looks cramped on a phone or overblown on a desktop, because the ratio that suits one does not suit the other. Setting a smaller ratio at the narrow end and a larger one at the wide end fixes that, and every step interpolates between them. This generates the whole set of steps at once.

settings

mode

single valuetype scale

min viewport

max viewport

base size (min)

base size (max)

ratio (min)

ratio (max)

unit

rempx

The largest size is more than 2.5x the smallest. Zooming to 200% may not double the text, which can fail WCAG 1.4.4. Treat this as a guideline, not a guarantee.

output

preview

The quick brown fox jumps over the lazy dog

size vs. viewport width

Technical Guide & Mechanics

Harmonious Typographic Systems with Responsive Scaling

A typography scale defined by a single static ratio (such as Major Third, 1.25) often breaks across extreme screen sizes: headings look cramped on mobile viewports or oversized on desktop monitors. Modern responsive design solves this by blending fluid typography with dual-ratio scales.

By defining a compact ratio at narrow viewports (e.g., 1.20) and a wider ratio at desktop widths (e.g., 1.333), every typographic step dynamically interpolates across the viewport range using CSS clamp().

This generator outputs your complete typographic scale as standard CSS custom properties or Tailwind CSS @theme tokens, ready for immediate integration into your design tokens.

how to use it

01Set the base size and ratio at your smallest viewport.
02Set the base size and ratio at your largest.
03Copy the scale as custom properties or a Tailwind theme block.

questions

What ratio should I use?: Something near 1.2 at the small end and 1.25 to 1.333 at the large end is a common starting point. The preview matters more than the number.
Why are negative steps named step-n1?: A literal minus would produce step--1, which reads as a malformed custom property. The n prefix keeps the names valid.
Can I output this for Tailwind?: Yes, as a v4 @theme block or a v3 config object, as well as plain custom properties.
How does it handle small caption sizes?: Negative steps (step-n1, step-n2) apply inverse ratios to gracefully scale down footers, captions, and badges.

Technical Guide & Mechanics

Harmonious Typographic Systems with Responsive Scaling

how to use it

questions

related