Skip to content
ToolBoxGeniehome

Modular Type Scale

Developer Tools · Added

Picking heading sizes one at a time produces a set that never quite looks deliberate. A modular scale derives every size from one base and one ratio, so the relationships are consistent by construction — and this writes the result out as CSS custom properties.

Your body text size. 16 is the browser default.

4:5. A common choice for editorial layouts with a few clear levels.

What rem is measured against

1.25 — Major third

+6Display61.035px3.8147rem
+5h148.828px3.0518rem
+4h239.063px2.4414rem
+3h331.25px1.9531rem
+2h425px1.5625rem
+1Lead paragraph, h520px1.25rem
0Body text16px1rem
-1Small print, captions12.8px0.8rem
-2Fine print, legal10.24px0.64rem

Sizes above 64px are shown at 64px in the preview so the page stays readable — the values themselves are unchanged.

The scale

SteppxremLine heightTypically
-210.240.641.6Fine print, legal
-112.80.81.6Small print, captions
01611.5Body text
+1201.251.5Lead paragraph, h5
+2251.56251.35h4
+331.251.95311.2h3
+439.0632.44141.2h2
+548.8283.05181.1h1
+661.0353.81471.1Display

CSS

:root {
  --text-sm-2: 0.64rem;   /* 10.24px — Fine print, legal */
  --text-sm-1: 0.8rem;   /* 12.8px — Small print, captions */
  --text-base: 1rem;   /* 16px — Body text */
  --text-1: 1.25rem;   /* 20px — Lead paragraph, h5 */
  --text-2: 1.5625rem;   /* 25px — h4 */
  --text-3: 1.9531rem;   /* 31.25px — h3 */
  --text-4: 2.4414rem;   /* 39.063px — h2 */
  --text-5: 3.0518rem;   /* 48.828px — h1 */
  --text-6: 3.8147rem;   /* 61.035px — Display */
}
  • The bottom of this scale is 10.2px. Below about 12px text becomes hard to read for many people, and browsers on mobile may enlarge it anyway.

The ratios are musical intervals — a major third is 5:4, a perfect fifth 3:2 — and the point is not that any one is correct but that using a single ratio makes the sizes look chosen rather than arbitrary. Sizes are given in rem as well as px because a rem follows the reader's own browser font-size setting and a px value ignores it, which is an accessibility failure no amount of good proportion fixes. The line heights are a starting point: smaller text needs more leading, and a large heading with the same proportional leading looks loose.

How to use the modular type scale

  1. 1Set the base size, usually 16px for body text.
  2. 2Choose a ratio — the musical intervals are named because that is where the idea came from.
  3. 3Set how many steps you need above and below the base.
  4. 4Copy the CSS custom properties, or the rem values if you are wiring them in by hand.

Examples

A major third from 16px

Input
Base 16px, ratio 1.25, two steps down and five up
Result
10.24, 12.8, 16, 20, 25, 31.25, 39.06, 48.83px — each 25% larger than the one before, with roles and line heights suggested for each.

A tighter scale for dense interfaces

Input
Base 16px, ratio 1.125
Result
Steps close enough together that a heading and its body text stay in the same visual family — better for dashboards than for editorial pages.

About the modular type scale

Why a ratio beats picking sizes

Choose heading sizes independently and you end up with 32, 24, 20 and 18 — numbers that look reasonable alone and have no relationship to each other. The gaps between them are 8, 4 and 2, so the visual step from H1 to H2 is nothing like the step from H3 to H4, and the hierarchy reads as uneven without it being obvious why.

A ratio fixes the relationship rather than the numbers. Every step is the same proportional jump, so the hierarchy is even at any size and stays even when you change the base. It also removes an argument: the next size is not a matter of taste once the ratio is chosen.

Line height belongs to the scale too

Suggested line heights on this page fall as sizes rise, and that is not a rounding artefact. Long lines of small text need generous leading for the eye to find the start of the next line; a 48px heading spanning two lines needs much less, and inherits an awkward gap if it is given body-text leading.

The usual shape is around 1.5 to 1.6 for body copy, tightening towards 1.1 to 1.2 at display sizes. Setting one line-height for the whole page is the most common way a well-chosen scale still ends up looking wrong.

Frequently asked questions

Which ratio should I pick?
Larger ratios give more drama and fewer usable steps; smaller ones give subtlety and more. Around 1.125 to 1.2 suits dense interfaces where headings sit close to body text. Editorial layouts with room to breathe carry 1.25 to 1.414 comfortably. Above 1.5 the third step up is already enormous, which works for a landing page and rarely for anything else.
Why are the ratios named after musical intervals?
Because the idea is borrowed from music, where a perfect fourth is a frequency ratio of 4:3 and a major third 5:4. Robert Bringhurst's typographic writing popularised applying the same ratios to size, and the names stuck. The analogy is a source of good numbers rather than evidence that a page sounds harmonious — 1.333 is a useful ratio whatever you call it.
Should I use the pixel values or the rems?
Rems, in nearly every case. A size set in rem scales with the reader's browser font-size setting, so someone who has raised their default because they need to gets a bigger page; a size set in pixels ignores them. The pixel column is there to show what the scale looks like at the default, not as the value to paste.
Do I need every step the scale produces?
No — a scale is a source of sizes, not a mandate to use all of them. Most designs draw on four or five: body, small print, and two or three heading levels. The value is that when you later need one more size, the scale already says what it should be, instead of it being chosen by eye and slightly off.

Related tools