All tools

Modular Type Scale

Generate a font-size scale at any ratio.

(small)
10.24px · 0.640rem
(small)
12.80px · 0.800rem
body
16.00px · 1.000rem
h6
20.00px · 1.250rem
h5
25.00px · 1.563rem
h4
31.25px · 1.953rem
h3
39.06px · 2.441rem
h2
48.83px · 3.052rem
h1
61.04px · 3.815rem
display
76.29px · 4.768rem

CSS variables

:root {
  --text-body: 1.000rem;
  --text-h6: 1.250rem;
  --text-h5: 1.563rem;
  --text-h4: 1.953rem;
  --text-h3: 2.441rem;
  --text-h2: 3.052rem;
  --text-h1: 3.815rem;
  --text-display: 4.768rem;
}

A modular type scale picks one ratio and walks it up and down from a base size. Pick smaller ratios (1.125, 1.2) for utility-heavy interfaces with lots of text levels, larger ratios (1.5, 1.618) for landing pages and editorial layouts.

About

Pick a base size and a ratio. Get a stack of font sizes (h1 through display) plus a copy-ready CSS variable block. Common ratios are 1.125 (utility apps), 1.25 (most websites), 1.333 (editorial), 1.618 (golden ratio).

How to use

  1. Pick a base size and a ratio.
  2. Pick how many levels.
  3. Copy the CSS variables.

FAQ

Which ratio should I pick?+

1.125 for dashboard-heavy apps where text needs to stay close together. 1.25 is the default safe pick. 1.333 to 1.5 reads as more editorial; 1.618 is dramatic and best on landing pages.