BYTETOOLS

Type Scale Generator

Build a modular type scale from a base size and ratio, with line heights snapped to a baseline grid, exported as CSS variables, Sass, Tailwind config or JSON.

Scale settings

5
2
4
1.5

Preview

4xlThe quick brown fox48.83px / 3.052rem
lh 76px
3xlThe quick brown fox39.06px / 2.441rem
lh 60px
2xlThe quick brown fox31.25px / 1.953rem
lh 48px
xlThe quick brown fox25px / 1.563rem
lh 40px
lgThe quick brown fox20px / 1.25rem
lh 32px
baseThe quick brown fox16px / 1rem
lh 24px
smThe quick brown fox12.8px / 0.8rem
lh 20px
xsThe quick brown fox10.24px / 0.64rem
lh 16px

Scale table

NameSteppxremLine heightUnitless
xs-210.240.6416px1.563
sm-112.80.820px1.563
base016124px1.5
lg+1201.2532px1.6
xl+2251.562540px1.6
2xl+331.251.953148px1.536
3xl+439.062.441460px1.536
4xl+548.833.051876px1.556

Export format

Generated scale

:root {
  --font-size-xs: 0.64rem;
  --font-size-sm: 0.8rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.25rem;
  --font-size-xl: 1.5625rem;
  --font-size-2xl: 1.9531rem;
  --font-size-3xl: 2.4414rem;
  --font-size-4xl: 3.0518rem;

  --line-height-xs: 1rem;
  --line-height-sm: 1.25rem;
  --line-height-base: 1.5rem;
  --line-height-lg: 2rem;
  --line-height-xl: 2.5rem;
  --line-height-2xl: 3rem;
  --line-height-3xl: 3.75rem;
  --line-height-4xl: 4.75rem;
}

What is the Type Scale Generator?

A modular scale picks font sizes by multiplying a base size by a fixed ratio, over and over. It is why well-set pages feel coherent: every heading is mathematically related to the body copy rather than chosen by eye.

  • Eight named ratios plus a custom option
  • Up to fourteen steps with Tailwind-style names
  • Line heights snapped up to a configurable baseline grid
  • Live specimen preview at every step
  • Full table of px, rem, line height and unitless values
  • Exports CSS variables, Sass, Tailwind config or JSON tokens

How to use the Type Scale Generator

  1. 1

    Set your base font size, usually the size of your body copy.

  2. 2

    Pick a ratio from the named list, or choose Custom and type your own.

  3. 3

    Choose how many steps to generate above and below the base.

  4. 4

    Set the baseline grid and target line height so the rhythm suits your design.

  5. 5

    Choose an export format and copy the generated scale.

About the Type Scale Generator

A modular scale picks font sizes by multiplying a base size by a fixed ratio, over and over. It is why well-set pages feel coherent: every heading is mathematically related to the body copy rather than chosen by eye. Ratios come from musical intervals, from the minor second at 1.067 up to the golden ratio at 1.618.

This generator builds the whole scale for you, up to nine steps above the base and four below. Each step is given in pixels and rems, with a line height snapped up to the nearest multiple of your baseline grid so blocks of text at different sizes still line up down the page.

Export it as CSS custom properties, Sass variables, a Tailwind fontSize config object, or JSON design tokens. Everything is calculated locally in your browser — nothing is uploaded and there is no account.

Frequently asked questions

What is a modular type scale?

It is a set of font sizes generated by repeatedly multiplying a base size by a fixed ratio. If your base is 16px and your ratio is 1.25, the next steps up are 20, 25 and 31.25 pixels. Because every size shares a relationship, the result looks deliberate rather than arbitrary.

Which type scale ratio should I use?

For dense interfaces and dashboards, a small ratio like 1.125 or 1.2 keeps headings from dwarfing the body text. For marketing pages and editorial layouts where you want drama, 1.333 or 1.5 gives you much more separation. The golden ratio at 1.618 is striking but leaves big gaps in the middle.

Why should line heights snap to a baseline grid?

Because it keeps text in adjacent columns and sections aligned horizontally down the page. If every line height is a multiple of four pixels, a heading followed by two paragraphs occupies a predictable multiple of that grid, and blocks beside each other stay in step.

Should I use px or rem for font sizes?

Use rem. A rem is relative to the browser's root font size, so if a user increases their default text size for readability, your whole scale grows with it. Pixel sizes ignore that preference entirely. This tool gives you both, with rem as the default.

How many steps does a type scale need?

Most design systems get by with six to eight: two below the base for captions and fine print, and four or five above for headings. Generating more than you need tempts people into using sizes that are barely distinguishable from each other.

Related tools