Type Scale Generator

A type scale is a set of font sizes that all come from one base size multiplied again and again by the same ratio, the way musical intervals relate notes. Headings, body text and captions then look related instead of random. This generator builds the scale from your base size and a classic ratio — from the subtle minor second to the dramatic golden ratio — lists every step in px and rem with a suggested use, writes CSS custom properties and heading rules, and can make each step fluid with clamp() between a small and a large screen.

How to use this tool

1. Enter the base (body) font size, usually 16 px.
2. Pick a ratio: 1.125–1.25 for text-heavy pages and apps, 1.333–1.618 for bold editorial or marketing pages.
3. Choose how many steps up and down you need and how to round them.
4. Optionally tick Fluid and set a smaller base and ratio for phones; then copy the CSS variables and heading rules.

Formula

size(n) = base × ratioⁿ · rem = px ÷ root size · fluid: clamp(small, intercept + slope × 100vw, large)

n is the step: 0 is the base, positive steps are larger and negative steps smaller. With Fluid on, each step has a small-screen size from the small base and ratio and a large-screen size from the main ones, and slope = (large − small) ÷ (large width − small width).

Example

With a 16 px base and the major third (1.25) the steps are 12.8, 16, 20, 25 and 31.25 px — 0.8, 1, 1.25, 1.5625 and 1.9531 rem — so h1 gets 31.25 px three steps up. The golden ratio grows much faster: 16, 25.89 and 41.89 px, or 26 and 42 px when rounded to whole pixels.