CSSAWWWARDS
+ Submit tool
Built-in toolFree · No signup

CSS Typography Scale Generator

Generate a harmonious modular type scale as CSS custom properties. Choose a base size, scale ratio, steps up and down, font family, weight, and line height. Live preview renders each size so you can evaluate the hierarchy at a glance.

Share:

Live Preview

89.8px--4xlThe quick brown fox
67.3px--3xlThe quick brown fox
50.5px--2xlThe quick brown fox
37.9px--xlThe quick brown fox
28.4px--lgThe quick brown fox
21.3px--mdThe quick brown fox
16.0px--baseThe quick brown fox
12.0px--smThe quick brown fox
9.0px--xsThe quick brown fox
16px

Scale ratio

6
2

Font family

Font weight

1.5
CSS Output
:root {  --text-xs: 9.00px;  --text-sm: 12.00px;  --text-base: 16.00px;  --text-md: 21.33px;  --text-lg: 28.43px;  --text-xl: 37.90px;  --text-2xl: 50.52px;  --text-3xl: 67.34px;  --text-4xl: 89.76px;  font-family: "DM Mono, monospace";  font-weight: 400;  line-height: 1.5;}

How to use

01

Set base size

16px is the web standard. Increase to 18px for body-heavy designs; decrease for dense UIs.

02

Pick a ratio

Perfect Fourth (1.333) is a safe default for most UIs. Golden Ratio creates dramatic contrast between sizes.

03

Adjust steps

6 steps up covers most hierarchies (body to hero). Add more steps for large-scale landing pages.

04

Copy CSS

Copy CSS outputs :root CSS custom properties — drop them straight into your design system.