Typographic scale: how to create a font size system

A typographic scale (modular scale) is a system of proportional font sizes based on a mathematical ratio. Instead of arbitrary values (14px, 18px, 22px), you get a harmonious hierarchy. This article explains what a modular scale is, popular ratios, how to implement it with CSS variables, integrate it with Tailwind, and use responsive typography.

To generate a typographic scale, use the reChecker typographic scale generator.

What is a modular scale

A modular scale is a sequence of sizes where each successive size is obtained by multiplying the previous one by a constant factor (ratio). For example, with a ratio of 1.25 and a base of 16px:

• 16px × 1.25 = 20px
• 20px × 1.25 = 25px
• 25px × 1.25 = 31.25px

This gives you a scale: 16, 20, 25, 31.25, 39, 48.8… instead of arbitrary values like 14, 18, 22, 28.

Popular ratios

Minor Third (1.2) and Perfect Fourth (1.333) are common choices for the web: they provide enough contrast without being overwhelming. Golden Ratio (1.618) is a classic, but it creates large jumps.

Practical application

Scale in both directions

The scale extends upward (headings) and downward (small text, captions):

… 0.64, 0.8, 1, 1.25, 1.563, 1.953, 2.44 … (rem)
   -2   -1   0   +1    +2     +3     +4

With a base of 16px and a ratio of 1.25: 0 = 16px, +1 = 20px, +2 = 25px, -1 = 12.8px.

Mapping to HTML

CSS variables approach

:root {
  --font-base: 1rem; /* 16px */
  --ratio: 1.25;

  --text-xs: calc(var(--font-base) / var(--ratio));
  --text-sm: calc(var(--font-base) / var(--ratio) * var(--ratio));
  --text-base: var(--font-base);
  --text-lg: calc(var(--font-base) * var(--ratio));
  --text-xl: calc(var(--font-base) * var(--ratio) * var(--ratio));
  --text-2xl: calc(var(--text-xl) * var(--ratio));
  --text-3xl: calc(var(--text-2xl) * var(--ratio));
  --text-4xl: calc(var(--text-3xl) * var(--ratio));
}

body {
  font-size: var(--text-base);
}

h1 { font-size: var(--text-4xl); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-2xl); }

Changing --ratio or --font-base recalculates the entire scale.

Tailwind integration

Tailwind defines font sizes through fontSize in tailwind.config.js. You can build a modular scale into it:

// tailwind.config.js
function getScale(base, ratio, steps) {
  const sizes = {};
  for (let i = -2; i <= steps; i++) {
    const size = base * Math.pow(ratio, i);
    const key = i === 0 ? 'base' : i > 0 ? `${i}xl` : `-${Math.abs(i)}`;
    sizes[key] = [`${size}px`, { lineHeight: 1.5 }];
  }
  return sizes;
}

module.exports = {
  theme: {
    extend: {
      fontSize: getScale(16, 1.25, 6),
    },
  },
};

Or use Tailwind's built-in values and adjust them to fit the chosen ratio — text-sm, text-base, text-lg already form a scale, which you can check against the ratio.

Responsive typography

You can change the base size and ratio at breakpoints:

:root {
  --font-base: 1rem;
  --ratio: 1.2;
}

@media (min-width: 768px) {
  :root {
    --font-base: 1.0625rem; /* 17px */
    --ratio: 1.25;
  }
}

@media (min-width: 1200px) {
  :root {
    --font-base: 1.125rem; /* 18px */
  }
}

Use a more compact scale on mobile and larger sizes on desktop. Alternatively, use clamp() for fluid scaling:

h1 {
  font-size: clamp(1.5rem, 2vw + 1.5rem, 3rem);
}

Two-axis scale (typography + vertical rhythm)

A more advanced approach is to link the typographic scale to vertical rhythm. The base line height (for example, 1.5) is multiplied by the same ratio or by a fixed step. Then the margin-top and margin-bottom of blocks are multiples of the baseline. Text and spacing align to a unified grid. The implementation is more complex, but it provides visual consistency across long pages.

Fluid typography with clamp()

Modern CSS allows smooth scaling without media queries:

h1 {
  font-size: clamp(1.5rem, 5vw + 1rem, 3rem);
}

The minimum is 1.5rem, the maximum is 3rem, and values between them are linearly interpolated from 5vw + 1rem. On narrow screens, the size is closer to the minimum; on wide screens, it is closer to the maximum. The formula is determined empirically; clamp() can be combined with a modular scale by setting min and max values from the calculated steps.

Typographic scale generator

Calculating a scale manually for each ratio is time-consuming. The reChecker typographic scale generator lets you:

• Choose a base size (px or rem)
• Choose a ratio (Minor Third, Perfect Fourth, Golden Ratio, and others)
• Get a complete scale upward and downward
• Export CSS variables or SCSS
• Connect Google Fonts (optional)

The tool is suitable for quickly prototyping typography and for design systems.

Line height and letter spacing

Font size is not the only parameter. As font size increases, line-height is usually reduced:

h1 {
  font-size: var(--text-4xl);
  line-height: 1.2;
}

p {
  font-size: var(--text-base);
  line-height: 1.6;
}

For large headings, use 1.1–1.3; for body text, use 1.5–1.7. For headings, letter-spacing can sometimes improve readability.

Example of a complete scale (Minor Third, 16px base)

Scale for spacing and grids

You can apply the same modular scale to spacing: margin, padding, gap. With a ratio of 1.25 and a base of 8px: 8, 10, 12.5, 15.6, 19.5… Round to whole numbers (8, 10, 12, 16, 20) for convenience. Tailwind uses a similar approach: 4, 8, 12, 16, 20, 24… A unified scale for typography and spacing creates rhythm and visual consistency.

Recommendations

1. Use one ratio per project — mixing different scales creates visual noise
2. Check on mobile — smaller steps may be difficult to read
3. Link it to the grid — spacing and margins can use the same scale
4. Document it — record the base, ratio, and purpose of each step in the style guide

FAQ

Which ratio should I choose for a scale?

Minor Third (1.2) or Perfect Fourth (1.333) are commonly used for the web. Minor Third is more restrained; Perfect Fourth provides more contrast. Golden Ratio (1.618) is for expressive headings and creative projects.

How do I apply a typographic scale in CSS?

Set the base size and ratio in CSS variables, and calculate the steps using calc() and multiplication. For example: --text-lg: calc(var(--font-base) * var(--ratio)). Apply the variables to the font-size of headings and text. Use the reChecker tool to generate a scale.

How do I integrate a scale with Tailwind?

Extend theme.fontSize in tailwind.config.js, calculating sizes with the formula base * ratio^n. Alternatively, choose suitable text-* Tailwind classes and check them against the selected ratio. The reChecker generator can export values for Tailwind.

Do I need to change the scale for different screens?

Not necessarily. For responsive typography, you usually change the base font-size or use clamp(). If needed, you can also change the ratio at breakpoints — use larger steps on desktop and smaller ones on mobile.

Where can I generate a typographic scale?

The reChecker typographic scale generator is a free online tool. Choose a base size and ratio, get a complete scale in px and rem, and export it to CSS or SCSS. It is suitable for design systems and web projects.