Typography Scale Generator

Generate a responsive, modular typography system from a single base size. Choose a scale, viewport range and get CSS variables, Tailwind config and JSON.

Base settings

Base font size (px)

Scale

Viewport range (px)

Min width

Max width

Used to calculate clamp() so sizes grow smoothly between these widths.

Steps below base

Steps above base

Fluid intensity

Controls how much each step grows between min and max viewport. 0 = fixed sizes, higher = more fluid.

Generated scale

Preview

Steps table

Token	Role	Px @ base	Rem	Line-height	Tracking	`clamp()`

Typography Scale Generator

Base settings

Generated scale

Steps table

CSS variables

Tailwind `fontSize` config

JSON scale

Base settings

Generated scale

Steps table

CSS variables

Tailwind fontSize config

JSON scale

Tailwind `fontSize` config