Harmonic Ratios for Web Typography: Picking the Right Modular Type Scale

The hardest decision when building a typographic system is not the base size — it is the ratio. Pick 1.200 and your headings barely separate from body text. Pick 1.618 and your h1 looms sixty pixels above everything else while your caption drowns in the gutter. The name "harmonic ratio" comes from music theory, where the same interval relationships that make a Perfect Fourth sound stable also produce a type scale that looks stable on screen. This guide walks through exactly which ratios work for which projects, with the actual numbers.

What makes a ratio "harmonic"

In music, intervals like the Perfect Fourth (4:3 = 1.333…) and Major Third (5:4 = 1.250) arise from small integer frequency ratios. Western ears have heard these intervals for centuries and process them as resolved and coherent — not random. Type designers in the 20th century noticed that font-size sequences built from the same proportions felt similarly resolved. Robert Bringhurst's The Elements of Typographic Style (2004, §8.2) explicitly names the musical intervals as a source for type scale ratios, and the label stuck.

The practical consequence: a modular scale built from a harmonic ratio gives every heading level a proportional relationship to the one below it. A 1.333× jump between body and subhead is the same proportion as the jump between subhead and section head. Your eye reads that consistency as hierarchy without consciously doing the math.

A non-harmonic ratio — say 1.175, a common hand-adjusted value — produces sizes that look almost right but not quite. The gap between h3 and h2 is slightly different from the gap between h2 and h1, and the result is a scale that needs individual exceptions to feel finished.

The four ratios worth knowing, with real numbers

I tested all four ratios using a 16px base across six steps (−1 through +4) on a documentation site redesign last quarter. Here are the actual computed values:

Minor Third (1.200)

| Step | px value | |------|----------| | −1 (caption) | 13.33 | | 0 (body) | 16.00 | | +1 (small heading) | 19.20 | | +2 (subhead) | 23.04 | | +3 (section head) | 27.65 | | +4 (page title) | 33.18 |

A page title of 33px against 16px body is a 2.07× span. Dense content — legal docs, technical references, enterprise dashboards — benefits from this tight range because you can fit multiple heading levels into a narrow viewport without any level overwhelming the text.

Major Third (1.250)

| Step | px value | |------|----------| | +4 (page title) | 39.06 |

The +4 step lands at roughly 39px, a 2.44× span over 16px body. This is the ratio I now use most often for content-heavy sites: headings are clearly distinct from body but none of them feels like a poster headline. It pairs well with a 17–18px reading size.

Perfect Fourth (1.333)

| Step | px value | |------|----------| | +4 (page title) | 50.52 |

This is the ratio behind many popular design systems. With a 16px base, the Perfect Fourth gives you body → subhead → section → page-title at 16 / 21.3 / 28.4 / 37.9 / 50.5px. Per Nielsen Norman Group research on F-pattern reading (2006 eyetracking study), users establish heading hierarchy within the first 200ms — a 3.16× span between body and main heading is large enough to register without a full reading pass.

Golden Ratio (1.618)

With base 16px, step +4 is already 110px. That works for single-page landing sites where h1 is essentially a hero image element. For anything with running prose and multiple heading levels, it forces you to compress your step range to three or four sizes at most, which limits your hierarchy.

Real input → output: Perfect Fourth at base 18px

I ran these settings in the Type Scale Generator to export the CSS variables directly:

Input: base = 18px, ratio = Perfect Fourth (1.333), root = 16px, steps up = 5, steps down = 1

Output (CSS):

:root {
  --text-xs:   13.50px; /* 0.844rem */
  --text-base: 18.00px; /* 1.125rem */
  --text-lg:   24.00px; /* 1.500rem */
  --text-xl:   32.00px; /* 2.000rem */
  --text-2xl:  42.66px; /* 2.666rem */
  --text-3xl:  56.88px; /* 3.555rem */
  --text-4xl:  75.84px; /* 4.740rem */
}

Starting from 18px rather than 16px (a common choice for body text on high-density displays) shifts the whole scale up while keeping every ratio intact. The 24px --text-lg becomes a natural subhead; 32px covers h3; 56px handles a section hero. I applied this exact output to a Markdown-driven blog and every heading level separated cleanly without any manual size overrides.

How to choose for your project

The project type narrows the field quickly:

• Long-form articles and documentation: Major Third (1.250) or Perfect Fourth (1.333). You want three to five visible heading levels, and the range between 16px body and 40–50px title is enough contrast without visual noise.

• Marketing and landing pages: Perfect Fourth (1.333) or Golden Ratio (1.618) for the hero section only, dropping back to Major Third for all subsequent sections. A 1.618× ratio applied to the entire page produces unusable small text at the bottom of the scale.

• Dense UI — dashboards, admin tools: Minor Third (1.200) or Major Third (1.250). Labels and data values must stay close in size; a 1.333 ratio between a table header and its data cell is too aggressive.

• Mixed viewport sizes: pair any ratio with fluid sizing. A static 56px h2 at a 1.333 scale becomes problematic on a 320px screen. The CSS clamp() Fluid Typography Generator takes the two anchor sizes (small-screen minimum, large-screen maximum) and writes the clamp() expression for you — combine it with a modular scale export and the result responds to viewport width while keeping ratio-derived proportions at every breakpoint.

One practical workflow

1. Decide the body size for your target screen: typically 16–18px on desktop, 15–16px on mobile.
2. Choose your ratio based on content density (see above).
3. Generate the full scale and check whether your h1 at the largest step is below ~80px. If it exceeds that, step down one ratio or reduce the number of upward steps.
4. Export as CSS variables (the Type Scale Generator gives you CSS, Tailwind, and SCSS output) and apply them globally in one :root block.
5. For responsive designs, feed the generated step values into a fluid generator. The two tools together take under five minutes.

The reason to go through this process rather than picking sizes manually is repeatability. Six months later, when a designer asks why the h2 is 28px instead of 30px, the answer is "Perfect Fourth ratio, base 18px, step +2" — a decision anyone can reconstruct and extend. Arbitrary numbers have no such explanation.

---

Made by Toolora · Updated 2026-06-27