Modular scale: typography that feels designed

Pick a ratio, multiply your way up

body  = 1rem
h6    = 1rem × 1.25^1 = 1.25rem
h5    = 1rem × 1.25^2 = 1.563rem
h4    = 1rem × 1.25^3 = 1.953rem
h3    = 1rem × 1.25^4 = 2.441rem
h2    = 1rem × 1.25^5 = 3.052rem
h1    = 1rem × 1.25^6 = 3.815rem

Each step is 1.25× the previous — the "Major Third" scale. Headings feel related instead of arbitrary.

Common scales

Pick ONE for your project. Stick with it. Suddenly your headings look "designed."

With custom properties

:root {
  --scale: 1.25;
  --text-base: 1rem;
  --text-sm: calc(1rem / var(--scale));         /* 0.8rem */
  --text-lg: calc(1rem * var(--scale));         /* 1.25rem */
  --text-xl: calc(var(--text-lg) * var(--scale));   /* 1.563rem */
  --text-2xl: calc(var(--text-xl) * var(--scale));  /* 1.953rem */
}

h6 { font-size: var(--text-lg); }
h5 { font-size: var(--text-xl); }
h4 { font-size: var(--text-2xl); }

Tailwind's text-sm/-base/-lg/-xl/-2xl is exactly this — a 1.25 modular scale baked in.

Sizes that aren't on the scale

If you need a size between two scale steps for one specific component (a hero subtitle), pick the closer one rather than introducing a new value. Discipline matters more than perfection.