Generate a modular Tailwind font-size scale — base size × musical ratio, with line heights paired automatically — as v4 @theme, v3 fontSize config or CSS variables.
Generated locally in your browser — your colors, settings and code never leave this page.
A type scale with a reason
Heading sizes picked ad hoc drift into chaos; sizes derived from one ratio relate musically. Choose a base size and a ratio — major third for product UI, perfect fourth for editorial — and get the full xs–5xl scale with line heights paired automatically: 1.5 at body sizes tightening to 1.2 at display sizes, the same curve Tailwind’s own defaults follow.
Worked example (v4)
@theme {
--text-base: 1rem;
--text-lg: 1.25rem;
--text-xl: 1.5625rem;
--text-base--line-height: 1.5;
--text-xl--line-height: 1.35;
/* … */
}Why rem sizes
- rem respects the user’s browser font-size setting — an accessibility requirement, not a preference. Users who raise their base size get proportionally larger text everywhere.
When to use it
- Starting a project: lock the scale before the first component.
- Rationalizing an old design where 14, 15, 17 and 19px all coexist.
- Pairing with the spacing generator so type and space share one rhythm philosophy.
Limitations
- Ratios above ~1.4 explode at the top of the scale — the preview makes that obvious before your h1 does.
- Font-family and weight tokens live in the Theme Generator; this page owns sizes.
How to use the Tailwind Typography Generator
- Set the base size and pick a modular ratio.
- Review the rendered specimen — each size shown at true scale.
- Export as v4 @theme (–text-* with paired line heights), v3 fontSize config, or CSS variables.
Frequently asked questions
What is a modular type scale?
Sizes derived from one ratio — each step multiplies the previous by 1.25 (or your choice) — so headings relate proportionally instead of arbitrarily. It is the fastest route to typography that looks deliberate.
How are line heights chosen?
Paired by size band: 1.5 for body sizes, tightening to 1.2 for display sizes — the same pattern Tailwind's default scale uses, because big text with tall line height falls apart visually.
Which ratio should I pick?
1.125–1.2 for dense product UI (small size differences), 1.25 as the safe default, 1.333+ for editorial pages where headings should dominate. Changing the ratio regenerates everything consistently.
