How to Create a Typographic Scale Online — Free (2026)

The brevio Typographic Scale Generator computes a harmonious set of font sizes from a base size and a mathematical ratio, then outputs CSS custom properties. Choose a named scale ratio, adjust the base, and copy the variables. Fully client-side.

What Is a Typographic Scale?

A typographic scale is a series of font sizes derived by multiplying a base size by a consistent ratio. Each step up in the scale multiplies by the ratio; each step down divides by it. This creates visual harmony because all sizes are mathematically related — the same principle behind musical scales.

Common Scale Ratios

How to Generate a Type Scale Step by Step

1. Open the Type Scale Generator.
2. Set your base font size. Typical values: 16px (browser default), 18px (body-text-focused sites), 14px (compact UI). The base becomes the "base" step in the scale.
3. Choose a ratio. Start with Major Third (1.25) for a balanced UI scale, or Perfect Fourth (1.333) if you want more distinct heading levels.
4. Review the scale table. Check that the xs and sm sizes are not too small (ideally ≥ 11px) and that 4xl/5xl sizes suit your display text needs.
5. Copy the CSS variables. Click Copy CSS Variables to get a :root { ... } block with all sizes as custom properties (e.g. --text-base, --text-lg).
6. Use the variables in your stylesheet. Reference them as font-size: var(--text-lg).

The Scale Formula

size_at_step_n = base × ratio^n

// Major Third (1.25), base 16px:
xs   = 16 × 1.25^-2 = 10.24px
sm   = 16 × 1.25^-1 = 12.80px
base = 16 × 1.25^0  = 16.00px
lg   = 16 × 1.25^1  = 20.00px
xl   = 16 × 1.25^2  = 25.00px
2xl  = 16 × 1.25^3  = 31.25px

Integrating Type Scale with Tailwind CSS

Override Tailwind's default fontSize scale in tailwind.config.ts:

// tailwind.config.ts
export default {
  theme: {
    fontSize: {
      xs:   ['0.640rem', { lineHeight: '1rem' }],
      sm:   ['0.800rem', { lineHeight: '1.25rem' }],
      base: ['1.000rem', { lineHeight: '1.5rem' }],
      lg:   ['1.250rem', { lineHeight: '1.75rem' }],
      xl:   ['1.563rem', { lineHeight: '1.75rem' }],
      '2xl':['1.953rem', { lineHeight: '2rem' }],
      '3xl':['2.441rem', { lineHeight: '2.5rem' }],
    },
  },
}

Modular Scale in Design Tokens

If you are using CSS custom properties as design tokens, the generated :root block drops in directly. Pair with spacing tokens derived from the same scale for full visual harmony:

:root {
  /* Type scale (Major Third, base 16px) */
  --text-xs:   0.640rem;
  --text-sm:   0.800rem;
  --text-base: 1.000rem;
  --text-lg:   1.250rem;
  --text-xl:   1.563rem;
}

Frequently Asked Questions

How many type scale steps do I need?

Most interfaces need six to eight steps: two or three below base for caption/label text, and four to five above for heading hierarchy (h1 through h4). More steps than that creates confusion rather than hierarchy.

Should I round type scale sizes to whole pixels?

Not necessarily. Browsers render fractional rem values correctly, and rounding can break the mathematical relationships that make the scale look harmonious. Keep the rem values as generated and let the browser handle sub-pixel rendering.

What ratio does Tailwind CSS use?

Tailwind's default font size scale is not a strict modular scale — it is hand-tuned for usability. The steps roughly follow a Major Third ratio between some sizes. The generated scale from this tool is more mathematically consistent, which is preferable when you want strict visual harmony.

Can I use a custom ratio not listed?

The tool includes the eight most common named ratios. For a custom ratio, use the formula: size = base × ratio^step, where step is the integer offset from base (0 for base, 1 for lg, −1 for sm, etc.).