Typography Scale Calculator

Choose a base size and ratio to create balanced type steps, from display headings down to small labels.

Scale controls

Base size (px)RatioSteps 7

Output unit

Preview scale

Centered around 16px body text.

Aa--text-2xs
0.512rem

Aa--text-xs
0.64rem

Aa--text-sm
0.8rem

Aa--text-base
1rem

Aa--text-lg
1.25rem

Aa--text-xl
1.563rem

Aa--text-2xl
1.953rem

:root {
--text-2xs: 0.512rem;
--text-xs: 0.64rem;
--text-sm: 0.8rem;
--text-base: 1rem;
--text-lg: 1.25rem;
--text-xl: 1.563rem;
--text-2xl: 1.953rem;
}

Explore Related Tools

Discover more utility-driven tools designed to enhance your workflow and technical excellence.

Tailwind Color Palette Generator

Generate a complete Tailwind CSS shade scale (50–950) from any base color. Live preview, copy the config, or export as CSS variables.

CSS & Design

CSS Gradient Generator

Build linear and radial gradients with unlimited color stops, adjustable angles, and a live preview. Copy production-ready CSS instantly.

CSS & Design

CSS Box Shadow Generator

Create layered box shadows visually — offset, blur, spread, color, inset — with curated presets and copy-ready CSS output.

CSS & Design