Typography Scale Generator
Build a complete modular type scale from a base size and a named musical ratio — minor second through golden ratio and octave — with named steps (xs … 9xl) that each get an auto-paired line-height and letter-spacing (tighter tracking as the type grows). Flip on fluid mode and every step becomes a correctly-computed clamp() that scales between your min and max viewport. A live type specimen renders real sample text at every step so you see the rhythm before you ship, and you can export to CSS variables, Tailwind v4 @theme, Tailwind v3 config, SCSS, or JSON.
About this ToolHow it works, benefits & use casesTap to collapse
Pick a base size and a named musical ratio — minor second (1.067) all the way up through the golden ratio (1.618), major sixth, minor seventh, and octave (2.0) — and this generator builds a full modular type scale with familiar named steps (xs, sm, base, lg, xl, 2xl … up to 9xl). Each step is automatically paired with a sensible line-height and letter-spacing that tightens as the type grows, so headings get controlled leading and negative tracking while body sizes stay readable. Switch on fluid mode and every step becomes a correctly-computed clamp(min, preferred, max) whose preferred value is a real rem + vw line between your chosen min and max viewport — responsive type with no breakpoint juggling. A live type specimen renders real sample text at every step so you see the rhythm before you ship, alongside a steps table listing name, px, rem, and line-height. Export to CSS custom properties with utility classes, Tailwind v4 @theme, a Tailwind v3 config, an SCSS map, or JSON, and share the exact configuration as a URL.
How to Use
- 1Set the base size in px — 16 is the typical default for body text.
- 2Choose a ratio from the dropdown (minor second through octave) to control how aggressively the scale grows.
- 3Adjust how many steps to generate above the base (display sizes) and below it (small sizes).
- 4Optionally turn on fluid mode and set the min and max viewport — every step becomes a clamp() that scales with the screen.
- 5Watch the live specimen and steps table update instantly, then pick an export format.
- 6Copy or download the generated code, or share the URL to hand the exact scale to a teammate.
Key Benefits
- Twelve named typographic ratios from minor second (1.067) to octave (2.0), including the golden ratio
- Named steps (xs … 9xl) with auto-paired line-height and letter-spacing tuned to each size
- Fluid mode emits a correct clamp(min, preferred, max) per step, computed as a rem + vw line
- Live type specimen renders real sample text at every step, updating as you edit
- Steps table shows name, px, rem, and line-height side by side
- Five export formats: CSS variables, Tailwind v4 @theme, Tailwind v3 config, SCSS map, and JSON
- Adjustable base size, step count up and down, and specimen font family
- Shareable URL captures the full scale configuration
Common Use Cases
- Establishing a consistent heading and body hierarchy for a design system
- Generating responsive fluid type with clamp() so headings shrink gracefully on phones
- Producing Tailwind v4 @theme or v3 fontSize tokens that carry line-height and tracking
- Emitting CSS variables and .text-* utility classes for a fresh project
- Comparing how different ratios feel in a live specimen before committing to one
Type specimen
| Name | px | rem | Line height |
|---|---|---|---|
| 5xl | 61.04 | 3.815 | 1.1 |
| 4xl | 48.83 | 3.052 | 1.1 |
| 3xl | 39.06 | 2.441 | 1.2 |
| 2xl | 31.25 | 1.953 | 1.2 |
| xl | 25 | 1.563 | 1.35 |
| lg | 20 | 1.25 | 1.45 |
| base | 16 | 1 | 1.5 |
| sm | 12.8 | 0.8 | 1.5 |
| xs | 10.24 | 0.64 | 1.6 |
CSS variables · 9 steps
:root {
--text-xs: 0.64rem;
--leading-xs: 1.6;
--tracking-xs: 0.01em;
--text-sm: 0.8rem;
--leading-sm: 1.5;
--tracking-sm: 0;
--text-base: 1rem;
--leading-base: 1.5;
--tracking-base: 0;
--text-lg: 1.25rem;
--leading-lg: 1.45;
--tracking-lg: -0.01em;
--text-xl: 1.563rem;
--leading-xl: 1.35;
--tracking-xl: -0.02em;
--text-2xl: 1.953rem;
--leading-2xl: 1.2;
--tracking-2xl: -0.02em;
--text-3xl: 2.441rem;
--leading-3xl: 1.2;
--tracking-3xl: -0.02em;
--text-4xl: 3.052rem;
--leading-4xl: 1.1;
--tracking-4xl: -0.025em;
--text-5xl: 3.815rem;
--leading-5xl: 1.1;
--tracking-5xl: -0.025em;
}
.text-xs {
font-size: var(--text-xs);
line-height: var(--leading-xs);
letter-spacing: var(--tracking-xs);
}
.text-sm {
font-size: var(--text-sm);
line-height: var(--leading-sm);
letter-spacing: var(--tracking-sm);
}
.text-base {
font-size: var(--text-base);
line-height: var(--leading-base);
letter-spacing: var(--tracking-base);
}
.text-lg {
font-size: var(--text-lg);
line-height: var(--leading-lg);
letter-spacing: var(--tracking-lg);
}
.text-xl {
font-size: var(--text-xl);
line-height: var(--leading-xl);
letter-spacing: var(--tracking-xl);
}
.text-2xl {
font-size: var(--text-2xl);
line-height: var(--leading-2xl);
letter-spacing: var(--tracking-2xl);
}
.text-3xl {
font-size: var(--text-3xl);
line-height: var(--leading-3xl);
letter-spacing: var(--tracking-3xl);
}
.text-4xl {
font-size: var(--text-4xl);
line-height: var(--leading-4xl);
letter-spacing: var(--tracking-4xl);
}
.text-5xl {
font-size: var(--text-5xl);
line-height: var(--leading-5xl);
letter-spacing: var(--tracking-5xl);
}
Scale
Affects the live specimen only — not the exported tokens.
Fluid (responsive) mode
Each step becomes clamp(min, preferred, max) that interpolates with the viewport width.
Export format
What is a modular scale?
A modular type scale multiplies a base size by a fixed ratio for each step up, and divides by it for each step down. Reusing one ratio — the same idea as intervals in music — gives every heading a deliberate, harmonious relationship instead of arbitrary pixel values.
Why fluid clamp() sizes?
A fixed scale that looks great on desktop is often too large on a phone. Fluid mode emits a clamp(min, preferred, max) per step where the preferred value is a real rem + vw line between your min and max viewport, so type resizes smoothly with the screen — no breakpoint juggling.
Was this tool helpful?
Share Your Experience
Help others discover this tool!
Related tools
- Tailwind Config GeneratorVisually build a Tailwind config - theme extend, colors, spacing, fonts, screens, plugins - and export it as a v3 JS config or a v4 @theme CSS block
- CSS FormatterFormat and beautify CSS code
- Bundle Analyzer VisualizerPaste a bundle file list to get a visual size treemap, gzip/brotli estimates, performance-budget pass/fail checks, and a build-vs-build diff of what grew or shrank
- Changelog GeneratorGenerate changelog from Git commit history
- Heroku Procfile GeneratorBuild a Heroku Procfile and matching app.json — process types, env vars, addons, dyno formation — plus a Procfile parser and audit
- Markdown TOC GeneratorGenerate table of contents for Markdown
Twelve named typographic ratios: minor second (1.067), major second (1.125), minor third (1.2), major third (1.25), perfect fourth (1.333), augmented fourth (1.414), perfect fifth (1.5), golden ratio (1.618), major sixth (1.667), minor seventh (1.778), major seventh (1.875), and octave (2.0). The base size is multiplied by the ratio for each step up and divided by it for each step down.
When fluid mode is on, each step is emitted as clamp(min, preferred, max). The max is the step’s normal size; the min is a slightly gentler scale so big display text does not overflow narrow phones; and the preferred value is the straight line through (min viewport, min size) and (max viewport, max size), expressed in rem + vw units against a 16px root. The result resizes smoothly with the viewport between your two breakpoints and locks at the bounds outside them — no media queries required.