Design / Typography

Type Scale Generator (Modular Scale for CSS and Tailwind)

Generate a modular type scale from a base font size and a ratio such as 1.25 or the golden ratio, preview every step with your own text, and copy the sizes as CSS custom properties or a Tailwind fontSize config in rem or px.

Type Scale Generator (Modular Scale for CSS and Tailwind): Every size is the base multiplied by the ratio once for each step: with 16 px and a major third, 1.25, the steps above are 20, 25, 31.25, 39.06, and 48.83 px, and the steps below 12.8 and 10.24 px. The sizes are listed in px and rem and named like Tailwind's text sizes, from xs to 4xl. Runs 100% locally in your browser with zero server file uploads.

Category
Developer tools
Runs
In your browser
Cost
Free · no sign-up
Availability
Ready to use
Type scale generatorLocal processing

Runs entirely in your browser

4xl48.83 px · 3.0518 remThe quick brown fox
3xl39.06 px · 2.4414 remThe quick brown fox
2xl31.25 px · 1.9531 remThe quick brown fox
xl25 px · 1.5625 remThe quick brown fox
lg20 px · 1.25 remThe quick brown fox
base16 px · 1 remThe quick brown fox
sm12.8 px · 0.8 remThe quick brown fox
xs10.24 px · 0.64 remThe quick brown fox
:root {
  --step-5: 3.0518rem;
  --step-4: 2.4414rem;
  --step-3: 1.9531rem;
  --step-2: 1.5625rem;
  --step-1: 1.25rem;
  --step-0: 1rem;
  --step--1: 0.8rem;
  --step--2: 0.64rem;
}

Each step is the one below multiplied by the ratio: with a 16 px base and a ratio of 1.25, the sizes above are 20, 25, and 31.25 px, and below 12.8 and 10.24 px. Small ratios such as 1.125 suit dense interfaces; larger ones such as 1.5 give headlines more contrast. rem values assume the browser's default root size of 16 px.

Where the ratio names come from

The names are musical intervals: a perfect fifth is a frequency ratio of 3 : 2, so a type scale built on 1.5 grows by the same proportion as notes a fifth apart. Tim Brown's modular scale popularised the idea for the web.

The golden ratio, 1.618, gives very large jumps; it is explained on the golden ratio calculator.

Rounding

Browsers render fractional pixel sizes, so 31.25 px is fine as it is. If a design system needs whole pixels, round each step and keep the rem values to four decimals, as the tool does; convert other values with the px to rem converter.

How to use it

  1. Enter the base size and choose a ratio.
  2. Set how many steps to go up and down, and preview them with your text.
  3. Copy the CSS variables or the Tailwind config.

Privacy & limitations

Everything runs in your browser.

Related tools

CSS clamp()CSS Unit ConverterGolden Ratio

Frequently asked questions

Which ratio should I use?

Interfaces with a lot of text and small screens suit gentle ratios such as 1.125 or 1.2; editorial pages and landing pages can use 1.333 to 1.618 for bolder headlines.

Why use rem?

rem sizes follow the reader's browser font-size setting, so text grows for people who need it larger. The conversion assumes the default 16 px root.

Can I make the sizes fluid?

Yes: take the smallest and largest size you want for a step and turn them into a clamp() expression with the CSS clamp generator.

Free tool · runs in your browser · no account required