Typography Scale Generator

Generate a modular type scale with live preview and copyable CSS.

Visual Design

Base size: 16px

Ratio

--text-h1: 39.06px;
--text-h2: 31.25px;
--text-h3: 25px;
--text-h4: 20px;
--text-body: 16px;
--text-small: 12.8px;
--text-xs: 10.24px;

h1 · 39.06px

h2 · 31.25px

h3 · 25px

h4 · 20px

The quick brown fox

body · 16px

small · 12.8px

xs · 10.24px

Related tools in Visual Design

Pick colors and explore harmonies — complementary, triadic, analogous and more.

Check WCAG AA/AAA contrast for any foreground/background combination.

Build harmonious palettes from a base color and copy hex codes.

by Deepesh Barjatya