Skip to main content
InstantTools
Utilities · 100% browser-side

Typography Scale Generator

Base size × ratio = a full heading scale, exported as CSS variables or fluid clamp().

Free foreverNo uploadsNo account
Base size (px)
Your body-text size. 16px is the browser default and a solid choice.
Scale ratio
Each step multiplies by this. Smaller ratios suit dense UIs; larger ones suit editorial pages.
5xl · 61.0pxThe quick brown fox
4xl · 48.8pxThe quick brown fox
3xl · 39.1pxThe quick brown fox
2xl · 31.3pxThe quick brown fox
xl · 25.0pxThe quick brown fox
lg · 20.0pxThe quick brown fox
base · 16.0pxThe quick brown fox
sm · 12.8pxThe quick brown fox
xs · 10.2pxThe quick brown fox
CSS custom properties
:root {
  --text-xs: 0.640rem; /* 10.2px */
  --text-sm: 0.800rem; /* 12.8px */
  --text-base: 1.000rem; /* 16.0px */
  --text-lg: 1.250rem; /* 20.0px */
  --text-xl: 1.563rem; /* 25.0px */
  --text-2xl: 1.953rem; /* 31.3px */
  --text-3xl: 2.441rem; /* 39.1px */
  --text-4xl: 3.052rem; /* 48.8px */
  --text-5xl: 3.815rem; /* 61.0px */
}
Fluid scale with clamp()
:root {
  /* Fluid: 80% size on small screens, full size at 1280px+ */
  --text-xs: clamp(0.512rem, 0.512rem + 0.160vw, 0.640rem);
  --text-sm: clamp(0.640rem, 0.640rem + 0.200vw, 0.800rem);
  --text-base: clamp(0.800rem, 0.800rem + 0.250vw, 1.000rem);
  --text-lg: clamp(1.000rem, 1.000rem + 0.313vw, 1.250rem);
  --text-xl: clamp(1.250rem, 1.250rem + 0.391vw, 1.563rem);
  --text-2xl: clamp(1.563rem, 1.563rem + 0.488vw, 1.953rem);
  --text-3xl: clamp(1.953rem, 1.953rem + 0.610vw, 2.441rem);
  --text-4xl: clamp(2.441rem, 2.441rem + 0.763vw, 3.052rem);
  --text-5xl: clamp(3.052rem, 3.052rem + 0.954vw, 3.815rem);
}
Suggested next steps

Keep working with these tools

Password GeneratorCreate unbreakable passwords tailored to your exact length and symbol requirements.QR Code GeneratorTurn any link, snippet, or contact into a scannable QR code — no signup, no watermark, no tracking redirects.Salary CalculatorSee what an hourly rate means per year, or a salary per hour, instantly.

Your privacy matters

All files are processed locally in your browser. Nothing is uploaded to our servers, so your documents remain private and secure.

01 · Real-world fits

Common use cases

  • Starting a design system with a mathematically consistent heading hierarchy
  • Replacing a codebase's accumulated random font sizes (13px, 15px, 17px, 22px…) with a rational scale
  • Generating fluid typography that shrinks gracefully on mobile without media queries
  • Comparing how different ratios feel before committing a brand direction
02 · The honest pitch

Why Typography Scale Generator?

Most interfaces accumulate font sizes one ad-hoc decision at a time until nothing lines up. A modular scale replaces those decisions with one: pick a ratio, and every size follows from it — the same principle musical intervals use, which is why the ratios carry names like Perfect Fourth. This generator shows the scale rendered live (not as abstract numbers), and exports both static CSS variables and fluid clamp() values, so responsive type needs no breakpoints at all.

Typography Scale Generator keeps the job narrow: base size × ratio = a full heading scale, exported as css variables or fluid clamp(). It is built for the small but frequent moments when opening a heavyweight editor, installing a package, or uploading sensitive work to a random service is more friction than the task deserves.

03 · Edge cases

Frequently asked questions

Interfaces with lots of UI chrome and data want restraint: Major Second (1.125) or Minor Third (1.2) keep headings from shouting. Content-first pages — blogs, marketing, editorial — can carry Perfect Fourth (1.333) or Golden Ratio (1.618) for real drama between levels. When unsure, Major Third (1.25) is the safe middle.