Introducing the Type Scale Generator — Modular CSS Font Sizes

The new Type Scale Generator builds a harmonious CSS typography scale from 8 classic ratios — and lets you copy the result as CSS custom properties or a Tailwind fontSize config.

What makes a type scale

A modular type scale picks a single ratio and multiplies your base font size (usually 16px) to generate each step. Every size in the scale relates mathematically to every other, producing visual harmony across headings, body text, captions, and labels.

8 classic ratios

The generator supports 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), and Golden Ratio (1.618). For most web UIs, start with Perfect Fourth.

What you configure

• Base size — typically 16px
• Scale — choose from 8 named ratios or enter a custom one
• Steps up — how many sizes above base (heading levels)
• Steps down — how many sizes below base (small text, captions)
• Unit — rem (recommended), px, or em
• Root size — for accurate rem conversion

Three outputs

Preview — a live visual preview of each step with example text at the actual computed size.

CSS Variables — a :root { } block to drop into your stylesheet.

Tailwind — a theme.extend.fontSize config block to paste into tailwind.config.js.

Try it

Open the Type Scale Generator. Read the guide for ratio selection tips and CSS variable usage.