How to named modular ratios for typography
- Step 1Find the ratio by tone — Scan the tone column: subtle ratios (1.067–1.2) for reading-first sites, balanced (1.25–1.414) for most products, dramatic (1.5–1.618) for editorial. Narrow to a band, then pick the exact value.
- Step 2Read off the generated sizes — Use the 16px-base size table to see what each ratio actually produces before generating. If the top size already looks too big in the table, choose a gentler ratio — it only grows from there at higher step counts.
- Step 3Select it in the builder — Open the [scale builder](/font-tools/typography-scale-builder), pick the matching entry in the Ratio dropdown, set your base and steps, and generate. The dropdown labels include the numeric value, so the reference maps straight to the UI.
- Step 4For a non-listed ratio, use the API — If you need 1.3 or 1.45, the page dropdown will not have it. Call the runner endpoint with a numeric `scaleRatio` — the handler accepts any positive number and computes the scale identically.
- Step 5Sanity-check against your content — Numbers in a table are abstract. Paste the generated tokens into a real template with real copy to confirm the ratio reads the way the tone column promised — especially for the dramatic end, which can overwhelm text-heavy pages.
- Step 6Record the choice — Note the chosen ratio and base next to your tokens. Future contributors then know the hierarchy is a deliberate, named decision, and can reproduce or adjust it confidently.
The eight named ratios
Exactly the presets in the builder's Ratio dropdown, with the numeric value the tool uses internally and the musical interval the name comes from.
| Name | Value | Musical origin | Tone |
|---|---|---|---|
| Minor Second | 1.067 | Semitone (16:15) | Whisper-quiet hierarchy, dense reading |
| Major Second | 1.125 | Whole tone (9:8) | Very gentle, content-first |
| Minor Third | 1.2 | Minor third (6:5) | Subtle but readable; popular for docs/blogs |
| Major Third | 1.25 | Major third (5:4) | The modern default; balanced for most sites |
| Perfect Fourth | 1.333 | Perfect fourth (4:3) | Expressive, editorial-friendly |
| Augmented Fourth | 1.414 | Tritone (≈√2) | Bold, near the dramatic threshold |
| Perfect Fifth | 1.5 | Perfect fifth (3:2) | Dramatic, strong headline presence |
| Golden Ratio | 1.618 | φ (not strictly musical) | Maximum drama, display-led layouts |
Sizes each ratio produces from a 16px base
Computed with default origin (base at index 2). xs and sm sit below the base; lg and up climb. These are the exact px the builder emits (rounded to 2 dp).
| Ratio | xs | sm | base | lg | xl | 2xl |
|---|---|---|---|---|---|---|
| Minor Second (1.067) | 14.05 | 15.00 | 16 | 17.07 | 18.22 | 19.44 |
| Major Second (1.125) | 12.64 | 14.22 | 16 | 18 | 20.25 | 22.78 |
| Minor Third (1.2) | 11.11 | 13.33 | 16 | 19.2 | 23.04 | 27.65 |
| Major Third (1.25) | 10.24 | 12.8 | 16 | 20 | 25 | 31.25 |
| Perfect Fourth (1.333) | 9.0 | 12.0 | 16 | 21.33 | 28.43 | 37.9 |
| Augmented Fourth (1.414) | 8.0 | 11.32 | 16 | 22.62 | 31.99 | 45.23 |
| Perfect Fifth (1.5) | 7.11 | 10.67 | 16 | 24 | 36 | 54 |
| Golden Ratio (1.618) | 6.11 | 9.89 | 16 | 25.89 | 41.89 | 67.77 |
Preset vs. arbitrary ratio access
What you can reach from the page vs. the runner API. The dropdown is fixed; the math underneath is not.
| Need | Web page | Runner API |
|---|---|---|
| One of the eight named ratios | Yes — dropdown | Yes — scaleRatioName or scaleRatio |
| A bespoke ratio (e.g. 1.3) | No | Yes — numeric scaleRatio |
| Origin / viewport tuning | No | Yes — scaleOrigin, fluidViewportMin/Max |
| Static + fluid CSS output | Yes | Yes — same type-scale.css |
Cookbook
The named ratios applied — full generated blocks for the most-used presets so you can copy directly, plus how to reach a non-listed ratio. For matching a ratio to brand tone see the brand-personality guide; for the modular-vs-arbitrary decision see that comparison.
Major Third (1.25) — the default, full block
ExampleThe most-used preset, generated at 16px, 8 steps. If you only memorise one ratio's sizes, make it this one: 16, 20, 25, 31.25, 39, 49.
/* ratio: 1.25 (Major Third) · base 16 · 8 steps */
:root {
--font-size-xs: 0.640rem; /* 10.24px */
--font-size-sm: 0.800rem; /* 12.8px */
--font-size-base: 1.000rem; /* 16px */
--font-size-lg: 1.250rem; /* 20px */
--font-size-xl: 1.563rem; /* 25px */
--font-size-2xl: 1.953rem; /* 31.25px */
--font-size-3xl: 2.441rem; /* 39.06px */
--font-size-4xl: 3.052rem; /* 48.83px */
}Minor Third (1.2) — the reading-first alternative
ExampleSecond most common, for content-heavy sites. Note how much tighter the steps are than Major Third — 19.2px vs 20px at lg, but only 27.65px vs 31.25px at 2xl.
/* ratio: 1.2 (Minor Third) · base 16 · 8 steps */
:root {
--font-size-xs: 0.694rem; /* 11.11px */
--font-size-sm: 0.833rem; /* 13.33px */
--font-size-base: 1.000rem; /* 16px */
--font-size-lg: 1.200rem; /* 19.2px */
--font-size-xl: 1.440rem; /* 23.04px */
--font-size-2xl: 1.728rem; /* 27.65px */
--font-size-3xl: 2.074rem; /* 33.18px */
--font-size-4xl: 2.488rem; /* 39.81px */
}Perfect Fourth (1.333) — expressive editorial
ExampleA favourite for editorial and content-design work — clearly more dramatic than Major Third but not as extreme as the fifth. Round px values fall out nicely (12, 16, 21.33, 28.43).
/* ratio: 1.333 (Perfect Fourth) · base 16 · 8 steps */
:root {
--font-size-xs: 0.563rem; /* 9px */
--font-size-sm: 0.750rem; /* 12px */
--font-size-base: 1.000rem; /* 16px */
--font-size-lg: 1.333rem; /* 21.33px */
--font-size-xl: 1.777rem; /* 28.43px */
--font-size-2xl: 2.369rem; /* 37.9px */
--font-size-3xl: 3.158rem; /* 50.52px */
--font-size-4xl: 4.209rem; /* 67.34px */
}A non-listed ratio via the runner API
ExampleThe dropdown has no 1.3. To generate one, POST a numeric scaleRatio to the runner — the handler accepts any positive number and returns the same two-block CSS.
POST http://127.0.0.1:9789/v1/tools/typography-scale-builder/run
Content-Type: application/json
{ "options": { "baseSize": 16, "scaleRatio": 1.3, "steps": 8 } }
# -> :root with --font-size-* at ratio 1.3 (lg = 20.8px, xl = 27.04px ...)Verify a ratio's sizes without the tool
ExampleThe formula is base × ratio^(i − origin), px rounded to 2 dp. Use it to predict any ratio's output or to double-check the reference tables above.
// step index i, origin 2 (default), base 16 // e.g. xl is index 4 -> exponent 4 - 2 = 2 Math.round(16 * 1.25 ** 2 * 100) / 100 // => 25 (Major Third xl) Math.round(16 * 1.618 ** 2 * 100) / 100 // => 41.89 (Golden xl) Math.round(16 * 1.2 ** -2 * 100) / 100 // => 11.11 (Minor Third xs)
Edge cases and what actually happens
Every row below was probed against the live API. Some documented requirements (alphabetical axis order, numerical tuple order) are not actually enforced in practice — useful to know if you've been blaming the wrong thing for a 400.
The ratio you want is not one of the eight
By designThe page dropdown is fixed at eight named presets — 1.3, 1.4, 1.45 are not selectable. The builder's handler accepts any numeric scaleRatio, so use the runner API for bespoke values. For the web page, pick the nearest preset; neighbouring ratios differ by amounts usually below the perceptual threshold.
Golden Ratio is not strictly a musical interval
ExpectedSeven of the eight names are musical intervals; the Golden Ratio (φ ≈ 1.618) comes from geometry, not music, and is grouped in for its long history in design proportion. It is the most aggressive option in the list — useful to know it sits outside the musical lineage of the others.
Gentle ratios round adjacent steps to nearly the same size
ExpectedAt Minor Second (1.067), base (16) and sm (15.00) are barely distinguishable after rounding, and small steps differ by ~1px. That subtlety is the entire point of a calm scale, but if you need clearly separable sizes, start at Minor Third (1.2) or higher.
The same ratio name maps to a fixed number — no variants
SupportedEach name corresponds to exactly one value in the tool (Major Third is always 1.25, never 1.26). Some references quote slightly different decimals for the same interval; the builder uses the values in the table above. If you need a hair more or less, use a numeric scaleRatio via the API.
High ratios produce huge top sizes at modest step counts
ExpectedPerfect Fifth and Golden compound quickly: at 16px base, Golden's 2xl is already ~68px and 4xl exceeds 177px. The reference table stops at 2xl for that reason — beyond it the dramatic ratios run away. Check the builder's Largest metric for your chosen step count.
You expected origin to be configurable in the reference workflow
By designThe size tables here assume the default origin of 2 (base at index 2). The web UI cannot change origin; it is API-only. If you shift origin, the same ratio produces a different distribution of sizes above and below the base — recompute with the formula in the cookbook.
Quoted px values differ slightly from other calculators
ExpectedThe builder rounds px to two decimals before computing rem. Other tools may round to whole px or keep more precision, so a 4xl might read 48.83px here and 48.8px or 49px elsewhere. The differences are sub-pixel and do not affect rendering; the underlying ratio is identical.
Picking a ratio purely by name without checking sizes
Watch outA name like 'Perfect Fifth' tells you the tone but not whether its top size fits your layout. Always cross-check the size table or generate before committing — a ratio that sounds right can produce a hero size your design has no room for.
Frequently asked questions
What are the eight ratios the builder offers?
Minor Second (1.067), Major Second (1.125), Minor Third (1.2), Major Third (1.25), Perfect Fourth (1.333), Augmented Fourth (1.414), Perfect Fifth (1.5), and Golden Ratio (1.618). These are exactly the entries in the Ratio dropdown, and each label shows its numeric value.
Why do the ratios have musical names?
Typographers borrowed them from music theory because both deal with harmonious ratios. A perfect fifth in music is a 3:2 frequency ratio, which is 1.5 — the same number used for the type scale. The premise is that proportions pleasing to the ear translate to proportions pleasing to the eye. The Golden Ratio is the one exception — it comes from geometry, not music.
Which is the most-used ratio in 2026?
Major Third (1.25) — it is the popular default across modern design systems and the builder's own default selection. Minor Third (1.2) is the common runner-up for content-heavy, reading-first sites. Both give clear, balanced hierarchy without running away at the top.
Can I use a ratio that isn't in the list?
Not from the web page — the dropdown is fixed at eight. But the underlying handler reads a numeric scaleRatio, so any positive number works through the runner API. The cookbook shows a 1.3 example. For the page, choose the nearest preset; the perceptual gap between neighbours is small.
What sizes does each ratio produce?
From a 16px base with default origin, the second table above lists xs through 2xl for all eight ratios. To extend further or use a different base, apply base × ratio^(i − origin) and round px to two decimals — the formula and worked examples are in the cookbook.
Is a higher ratio always more dramatic?
Yes — the ratio is the multiplier between steps, so a bigger number means bigger jumps and a louder hierarchy. 1.067 keeps headings within a hair of body text; 1.618 makes the top steps tower. The trade-off is readability on text-heavy pages, where high ratios disrupt reading rhythm.
What's the difference between Augmented Fourth and Perfect Fifth?
Augmented Fourth (1.414, the tritone, ≈ √2) sits just below Perfect Fifth (1.5). The fifth is noticeably more dramatic — at 16px base, xl is 31.99px (augmented fourth) vs 36px (fifth), and the gap widens further up. Pick the fourth for bold-but-controlled, the fifth for clearly headline-led.
Does the ratio affect the small sizes too?
Yes — steps below the base (xs, sm at default origin) shrink by the same ratio. A high ratio makes xs very small (Golden's xs is ~6px at 16 base), which can be too tiny for captions. Watch the Smallest metric, and consider raising the origin (via API) if you need larger small sizes.
Should I match the ratio another popular site uses?
Only if its tone fits yours. Copying a ratio for its own sake risks looking like everyone else. The brand-personality guide maps tones to ratios so you can choose deliberately rather than by imitation.
Are the numeric values exact?
They are the exact values the tool uses (1.067, 1.125, 1.2, 1.25, 1.333, 1.414, 1.5, 1.618). Some sources quote a musical interval to more decimals, but the builder uses these. If you need a slightly different number, pass it as a numeric scaleRatio to the API.
How do I verify a ratio's output without opening the tool?
Apply Math.round(base * ratio ** (i − origin) * 100) / 100 for step index i (origin 2 by default). The cookbook has worked examples that reproduce the table exactly. This is also how you predict an arbitrary ratio's sizes before calling the API.
Where do I go to actually build the scale?
The type scale builder — pick the ratio from the dropdown, set base and steps, and copy the generated static and fluid CSS. This page is the lookup; that page is the generator.
Privacy first
Every JAD Font tool runs entirely in your browser using opentype.js and the wawoff2 WASM Brotli encoder. Your fonts never leave your device — verified by zero outbound network requests during processing.