Type Scale Generator
Pick a base size and a ratio to generate a consistent modular type scale. Preview every step at once and copy it as CSS custom properties or Tailwind config.
: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 */
}FAQ
What is a modular type scale?
It is a set of font sizes derived by repeatedly multiplying a base size by a fixed ratio. Each step relates to the last by the same proportion, so headings and body text feel harmonious instead of arbitrary.
Which ratio should I pick?
Smaller ratios like 1.2 (minor third) keep steps close together and suit dense product UI. Larger ratios like 1.333 or the 1.618 golden ratio create dramatic contrast that works well on landing pages.
Can I export it for Tailwind?
Yes. Toggle the output to Tailwind to get a fontSize object you can drop into your config, or use CSS to get a set of custom properties.
Now design the whole app.
Bender turns a prompt into a full set of themed mobile screens you can edit, test, and export. Free to start — no credit card.
Try Bender free