Type Scale Generator

Create a consistent type scale and export it as design tokens.

← Back to UX Tools

Settings

Typeface

Used for rem conversion. Default 16 px = 1rem.

Scale ratio

Low ratios: dense interfaces. Mid ratios: products and editorial sites. High ratios: expressive layouts with fewer levels.

Not every font ships every weight; the browser may synthesize missing ones.

Mode

Type scale

display

step +6

Design is deciding what to leave out.

px
61.04
rem
3.8147
line-height
1.15 (70.2px)
weight
700
3.8147rem

heading-1

step +5

Design is deciding what to leave out.

px
48.83
rem
3.0518
line-height
1.15 (56.15px)
weight
700
3.0518rem

heading-2

step +4

Design is deciding what to leave out.

px
39.06
rem
2.4414
line-height
1.15 (44.92px)
weight
700
2.4414rem

heading-3

step +3

Design is deciding what to leave out.

px
31.25
rem
1.9531
line-height
1.15 (35.94px)
weight
700
1.9531rem

heading-4

step +2

Design is deciding what to leave out.

px
25
rem
1.5625
line-height
1.15 (28.75px)
weight
700
1.5625rem

heading-5

step +1

Design is deciding what to leave out.

px
20
rem
1.25
line-height
1.15 (23px)
weight
700
1.25rem

body

step +0

Design is deciding what to leave out.

px
16
rem
1
line-height
1.5 (24px)
weight
400
1rem

small

step -1

Design is deciding what to leave out.

px
12.8
rem
0.8
line-height
1.5 (19.2px)
weight
400
0.8rem

caption

step -2

Design is deciding what to leave out.

px
10.24
rem
0.64
line-height
1.5 (15.36px)
weight
400
0.64rem

UI preview

Foundations

Intentional type hierarchy

A coherent scale organizes reading.

Body copy carries the content. Check rhythm, weight, and contrast across levels before exporting tokens.

Sample card

A secondary block to judge headings and supporting text together.

Caption or contextual metadata

Export

:root {
  --font-family-primary: "Funnel Display", sans-serif;

  --font-size-display: 3.8147rem;
  --line-height-display: 1.15;
  --font-weight-display: 700;

  --font-size-heading-1: 3.0518rem;
  --line-height-heading-1: 1.15;
  --font-weight-heading-1: 700;

  --font-size-heading-2: 2.4414rem;
  --line-height-heading-2: 1.15;
  --font-weight-heading-2: 700;

  --font-size-heading-3: 1.9531rem;
  --line-height-heading-3: 1.15;
  --font-weight-heading-3: 700;

  --font-size-heading-4: 1.5625rem;
  --line-height-heading-4: 1.15;
  --font-weight-heading-4: 700;

  --font-size-heading-5: 1.25rem;
  --line-height-heading-5: 1.15;
  --font-weight-heading-5: 700;

  --font-size-body: 1rem;
  --line-height-body: 1.5;
  --font-weight-body: 400;

  --font-size-small: 0.8rem;
  --line-height-small: 1.5;
  --font-weight-small: 400;

  --font-size-caption: 0.64rem;
  --line-height-caption: 1.5;
  --font-weight-caption: 400;
}