A Type Scale for Your Note Headings: Sizing Structure So It Reads at a Glance

Size your note headings on a ratio-based modular scale, not arbitrary numbers. Pick one base size and one ratio — a value like the golden mean of 1:1.618 — then multiply and divide to derive every heading step. The result is an H1-through-H4 hierarchy your eye reads at a glance.

The idea is old typographic craft, not a web trick. The typographer Robert Bringhurst named it in The Elements of Typographic Style: "A modular scale, like a musical scale, is a prearranged set of harmonious proportions." ¹ In 2011, the designer Tim Brown carried the idea onto the screen in A List Apart, arguing that ratios drawn from music and classical proportion produce a harmony that arbitrary numbers cannot ². A scale is nothing exotic. You choose a base, the size of your body text, and a ratio, then step up and down from the base by multiplying or dividing. Every heading size in your note comes from the same source, so nothing is guessed. This piece takes that principle, narrows it to the four heading levels a long note actually uses, and hands you the CSS to apply it — plus the one caveat that keeps a scale from turning your note into a ransom letter of thirty different sizes.

What is a modular type scale?

A modular type scale is a set of sizes generated from one base number and one ratio. Tim Brown's worked example is arithmetic: start with a ratio like 1:1.618 and a number like 10, then multiply and divide to reach "many resonant numbers": 10 becomes 16.180, which becomes 26.179, and so on up the scale ².

The ratio is the whole trick. Brown's case for choosing one deliberately is that the numbers carry a felt relationship: "By using culturally relevant, historically pleasing ratios to create modular scales and basing the measurements in our compositions on values from those scales, we can achieve a visual harmony not found in layouts that use arbitrary, conventional, or easily divisible numbers." ²

Common ratios come from music and geometry: the major second (1.125), the major third (1.25), the perfect fourth (1.333), the golden mean (1.618). A small ratio yields a gentle, closely spaced ladder; a large one yields dramatic jumps. You pick one and commit.

Why arbitrary heading sizes fail the glance test

Headings exist so a reader can find structure without reading every word. When sizes are picked by eye — 24px here, 19px there, 30px because it looked right — the steps between levels are uneven, and the eye cannot infer the hierarchy at a glance. A scale makes each step proportional, so rank reads as size.

This is the same discipline that governs the horizontal shape of a note. A comfortable line length keeps the eye from losing its place across a line; a proportional heading scale keeps it oriented down the page. Both are covered in the companion note on the 66-character line, and both do one job: they let structure be seen rather than decoded.

Be precise about what that job is. A scale makes hierarchy legible at a glance. It does not make the content easier to understand or remember. That is a different claim, and heading size does not carry it.

A four-step scale for your notes

Most notes need four heading levels, so you need four steps above your body text. Choose a base of 1rem and a gentle ratio — 1.25, the major third, is safe for dense notes — then let each level multiply the last. In CSS custom properties, the whole scale derives from two numbers you can change in one place.

Set the base and ratio once; every heading reads from them:

:root {
  --ratio: 1.25;                                 /* major third: gentle enough for notes */
  --step-0: 1rem;                                /* body text */
  --step-1: calc(var(--step-0) * var(--ratio));  /* h4  ~1.25rem  */
  --step-2: calc(var(--step-1) * var(--ratio));  /* h3  ~1.563rem */
  --step-3: calc(var(--step-2) * var(--ratio));  /* h2  ~1.953rem */
  --step-4: calc(var(--step-3) * var(--ratio));  /* h1  ~2.441rem */
}

h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }

Two properties hold the whole system. Change the ratio to 1.2 and every heading tightens together; change it to the golden mean, 1.618, and they spread apart, still in proportion. Because the steps are expressed in rem, they scale with the reader's base font size instead of freezing at a pixel value.

If you want the base itself to breathe between phone and desktop, wrap it in clamp():

:root {
  --step-0: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
}

The headings follow automatically, because they are all multiples of that one line. That is the part worth keeping: not a table of sizes to copy, but a rule that regenerates the table whenever you change your mind.

What a shipped scale looks like: Material Design 3

You do not have to invent a scale yourself — you can read one off a production design system. Google's Material Design 3 ships a full type scale, from Display Large at 57px down to Label Small at 11px, with Headline Large at 32px and Title Large at 22px ³. It is a modular scale, tuned and shipping.

Material's sizes step in a ladder you can borrow directly. Its display sizes run 57, 45, and 36px; its headlines 32, 28, and 24px; its titles 22, 16, and 14px; body 16, 14, and 12px; labels 14, 12, and 11px ³. For a note, you would not use all fifteen. You would pick your body size and the three or four heading steps above it, and let the rest go.

That is the bridge from theory to a real interface. A scale is not an academic ornament. It is what a team of designers reaches for when a product has to stay legible across hundreds of screens.

The caveat: don't overdo the steps

A scale will generate far more sizes than a note needs, and that is its trap. As the developer Chris Krycho warns, the modular-scale tool "will happily spit out a table with 36 different values on it" ⁴. Thirty-six sizes is not a hierarchy; it is noise. Pick a handful — body plus four headings — and discard the rest.

Krycho's own rule is restraint: "the modular scale can get away from you pretty easily if you're not careful." ⁴ The discipline is choosing, not generating. He points to Typeplate, which "defines a limited set of heading sizes — just nine sizes total, in fact," as the disciplined counter-example ⁴.

The danger of using everything the tool offers is blunt: "if I use all 36 of those values, or even if I don't choose from among them discerningly, my site is going to be just as much of a mess as if I eyeballed it." ⁴

One honest limit belongs here too. A proportional scale makes your note's structure easy to see; it does not make the note easier to understand or to remember. Larger, ratio-tuned headings improve scanning, not comprehension or recall. Size the structure for the eye, and let the writing do the rest — the same way a comfortable line-height makes a paragraph easier to read without changing a word of it.

Frequently Asked Questions

Short answers to the questions that surface most often when people size their note headings: the ratio to pick, how many sizes to use, and how to wire it into your note's CSS. Each answer below is a single, liftable paragraph you can act on today.

What font sizes should I use for headings?

Do not pick sizes individually. Choose one base size, your body text (often 1rem), and one ratio, then derive each heading by multiplying up from the base. A gentle ratio like 1.25 gives a body of 16px and roughly 20, 25, 31, and 39px for four heading levels. The sizes relate because they share a source, and that relationship is what the eye reads as hierarchy.

What is a modular type scale?

A modular type scale is a set of harmonious sizes built from a single base number multiplied and divided by a fixed ratio. Robert Bringhurst defined it as "a prearranged set of harmonious proportions," like a musical scale ¹. Every value on the scale is related to every other by the same ratio, which is what makes the sizes feel like a system rather than a pile of numbers.

What ratio should I use for a type scale?

Any consistent, pleasing ratio works. The point is consistency, not a magic number. Classic choices run from the major second (1.125) through the major third (1.25) to the golden mean of 1:1.618 ². Small ratios give closely spaced, calm headings; large ratios give dramatic jumps. For dense notes, stay near 1.2 to 1.25 so the largest heading does not overwhelm the page.

How many heading sizes should I use?

A handful. A modular-scale tool will generate dozens of values. As Chris Krycho notes, it "will happily spit out a table with 36 different values on it," but a note needs only its body size plus three or four heading steps ⁴. Using more sizes than that reads as noise, not hierarchy. Generate many, choose few, and delete the rest.

What are the Material Design type scale sizes?

Material Design 3 ships a fifteen-step scale. Its headline sizes are 32, 28, and 24px; titles 22, 16, and 14px; body 16, 14, and 12px; the largest display size is 57px and the smallest label 11px ³. It is a production modular scale you can borrow a few steps from. Confirm the current tokens against Material's own spec, which revises its values over time.

How do I set heading sizes in CSS with rem and clamp?

Express your base in rem so headings scale with the reader's font size, and derive each heading with calc() from a single ratio held in a custom property. To make the base fluid between phone and desktop, wrap it in clamp(). For example, clamp(1rem, 0.95rem + 0.25vw, 1.125rem) lets the headings follow automatically, because each is a multiple of that one base value.

A heading size is not a decoration chosen one at a time — it is a position in a proportion. Give every heading the same ratio, and the note tells a reader where they are before a single word is read.

You can apply a scale like this to your own notes in mnmnote.com, where headings are plain Markdown rendered by a theme you control.