Typography Scale Generator - Type System Builder Free

Typography Scale Generator

Build a modular type scale with a base size and a ratio. See it live, tweak the font, copy as CSS variables, Tailwind config, Sass map, or JSON. Modular ratios from minor second to golden ratio plus custom.

Live preview 9 ratios + custom CSS / Tailwind / Sass / JSON 600+ Google fonts 100% local

Scale

Base size (px)

16

Ratio Minor second (1.067) Major second (1.125) Minor third (1.200) Major third (1.250) Perfect fourth (1.333) Augmented fourth (1.414) Perfect fifth (1.500) Golden ratio (1.618) Major sixth (1.778) Custom…

Custom ratio

Steps below base

2

Steps above base

6

Smallest

—

Base

—

Largest

—

Quick presets

Font

Family

Weight 300 light 400 regular 500 medium 600 semibold 700 bold 800 extrabold

Line height

1.5

Letter spacing (em)

0

Preview text

Naming

how steps are labeled

Style T-shirt (xs, sm, md, lg, xl…) Numeric (100, 200, 300…) Step (-2, -1, 0, 1, 2…) Heading (h6, h5, h4, h3, h2, h1, display) rem-based (1rem, 1.25rem…)

Unit rem em px

Visual scale

hover bars for size

Live preview

Tip: click any size on the right to copy that single CSS rule. Or grab the whole scale below.

Export

copy any format