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.

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

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 to use it

questions

related