Type Scale Generator

About the Type Scale Generator

A type scale gives every text size on a site one proportion: start from a base size and multiply by the same ratio for each step up, divide for each step down. Pick a base (usually your body text, such as 16 px) and a ratio — the musical intervals of Tim Brown’s Modular Scale, from the minor second (1.067) through the major third (1.25) and the perfect fourth (1.333) to the golden ratio (1.618) — or type your own. You get each step’s size in px and rem, previewed on headings, a paragraph and captions in the font you choose.

Make it fluid and the scale grows with the screen: one base and ratio for phones, another for desktops, and every step written as a CSS clamp() that moves smoothly between them, as the Utopia calculators do. Each fluid step is checked against WCAG 2.2 success criterion 1.4.4, so you know whether zooming can still double it. A matching spacing scale (0.25 to 6 times the base, on a 4- or 8-point grid) comes with it, and everything exports as CSS variables, a Tailwind v4 @theme, a Tailwind v3 config, SCSS or design tokens. Without a pass you see a free preview: every step on a watermarked specimen and the first half of the tables and exports.

Common uses

• Setting up the type sizes of a new design system or website in one step.
• Replacing a pile of one-off font sizes with a consistent scale.
• Fluid headings that suit phones and desktops without media queries.
• Spacing tokens that match the type for padding, gaps and margins.

How a modular scale works

Robert Bringhurst described a modular scale as a prearranged set of harmonious proportions, like a musical scale; Tim Brown’s More Meaningful Typography brought it to the web: start with a ratio and a number, then multiply and divide. Step n of the scale is base × ratio^n, so step 1 is base × ratio, step 2 is base × ratio², and step −1 is base ÷ ratio. The named ratios here are those of Modular Scale, from musical intervals (5:6 is the minor third, 4:5 the major third, 3:4 the perfect fourth, 2:3 the perfect fifth) and the golden section (1:1.618).

Choosing a ratio

Small ratios (1.067–1.2) keep sizes close together, which suits dense interfaces and small screens; larger ratios (1.25–1.618) give strong contrast between headings and text, which suits editorial pages and landing pages. A fluid scale can use both: a minor third on phones, where a big ratio would make headings huge, and a major third or perfect fourth on desktops.

Fluid scales

A fluid scale has a base and a ratio at a narrow viewport and at a wide one. Each step’s two sizes are joined by a straight line, written as clamp(min, intercept + slope × 100vw, max) with slope = (max − min) ÷ (wide − narrow viewport) and intercept = min − narrow viewport × slope — the Utopia method. The preview’s slider shows the scale at any window width in between. The CSS Clamp Generator explains a single value in detail.

Spacing that matches the type

The spacing scale multiplies the same base: 3xs is a quarter of it, then 2xs ½, xs ¾, s 1, m 1½, l 2, xl 3, 2xl 4 and 3xl 6 times, so padding and gaps keep the rhythm of the text. On a 4-point grid each size is rounded to a multiple of 4 px; on an 8-point grid to a multiple of 8 px with 4 px kept as the half step, which can make two neighbouring steps equal (the page says when).

Zoom and accessibility

Sizes are written in rem, so they follow the reader’s default text size and page zoom. In a fluid step, the vw part does not grow with zoom; following WCAG 2.2 success criterion 1.4.4 Resize Text, each fluid step is checked for whether page zoom up to 500 % can still make it twice as large, and steps that fail are named. A step whose largest size is at most 2.5 times its smallest always passes.

Using the exports

• CSS variables: --step-0: clamp(…), then font-size: var(--step-0).
• Tailwind v4: an @theme block with --text-* and --spacing-* variables, which become utilities such as text-step-0 and p-space-m.
• Tailwind v3: theme.extend.fontSize and theme.extend.spacing for tailwind.config.js.
• SCSS: variables and a $font-sizes map.
• Design tokens: the Design Tokens Community Group format, with dimension tokens in px or rem; a fluid step is a group with its min and max and the clamp() under $extensions.

Limitations

• The sizes are exact; rounding to whole pixels for a design file is up to you. Fonts with a large or small x-height can look a step larger or smaller than the numbers suggest.
• The zoom check models page zoom as in Maxwell Barvian’s analysis of fluid type, with the zoom levels Chrome offers; Safari’s zoom can behave differently, so check your pages there too.
• Up to 12 steps above and 12 below the base.
• In the free preview every step is shown on a watermarked specimen with its zoom check, with the first half of the size tables and of each export; copying and downloads stay locked.

Privacy

Everything happens in your browser. What you enter or open here is not uploaded or stored by MySmartCoPilot. The preview fonts are downloaded from this site the first time you pick one; your settings never leave your device.