How to pick a type scale ratio that matches brand personality
- Step 1Name the brand tone first — Before touching the dropdown, decide the feeling: calm and editorial-quiet, confident and balanced, or loud and dramatic. The ratio expresses that feeling. Writing it down stops the choice from being arbitrary.
- Step 2Map the tone to a ratio band — Calm/reading-first → Minor Second (1.067) to Minor Third (1.2). Balanced/most brands → Major Third (1.25) to Augmented Fourth (1.414). Dramatic/headline-led → Perfect Fifth (1.5) to Golden Ratio (1.618). Pick the preset inside the band that matches.
- Step 3Set base and steps for the medium — 16px base for screen body; bump to 18px for long-form reading. Steps decide how high the hierarchy climbs — 6–8 for restrained UIs, 9–12 for sites with big display type. Remember a dramatic ratio plus many steps produces very large top sizes.
- Step 4Generate and read the range — Press the action and check the `Smallest` and `Largest` metrics. If the largest is unusable for your layout (a 200px hero you have no room for), reduce steps or drop to a gentler ratio rather than fighting it later with overrides.
- Step 5Pressure-test against real content — Paste the tokens into your actual templates with real copy. A dramatic ratio that looked striking in the abstract can swamp a content-heavy article. Calm ratios can leave a hero feeling timid. Adjust the ratio, not just individual sizes.
- Step 6Document the ratio as a brand decision — Record the chosen ratio, base, and why, next to the generated tokens. 'Golden Ratio for editorial drama' or 'Minor Third for reading comfort' tells future contributors the hierarchy is intentional, not accidental.
Brand tone → ratio map
The eight presets grouped by the personality they project. Pick the band first, then the exact ratio inside it.
| Tone | Ratios | Feels like | Typical brands |
|---|---|---|---|
| Calm / reading-first | Minor Second (1.067), Major Second (1.125), Minor Third (1.2) | Quiet hierarchy, body text dominates, dense and comfortable | Docs, technical blogs, dashboards, long-form reading |
| Balanced / confident | Major Third (1.25), Perfect Fourth (1.333), Augmented Fourth (1.414) | Clear hierarchy, headings stand out without shouting | SaaS marketing, e-commerce, most product sites |
| Dramatic / editorial | Perfect Fifth (1.5), Golden Ratio (1.618) | Big jumps, display type as the star, body recedes | Editorial, luxury, fashion, agency portfolios |
Same base, same steps — how the top size explodes by ratio
16px base, default origin, showing the lg through 4xl tokens. This is why ratio choice is a layout decision as much as a tone one: the top of the scale grows enormously with the ratio.
| Token | Minor Third (1.2) | Major Third (1.25) | Perfect Fifth (1.5) | Golden (1.618) |
|---|---|---|---|---|
base | 16px | 16px | 16px | 16px |
lg | 19.2px | 20px | 24px | 25.89px |
xl | 23.04px | 25px | 36px | 41.89px |
2xl | 27.65px | 31.25px | 54px | 67.77px |
3xl | 33.18px | 39.06px | 81px | 109.66px |
4xl | 39.81px | 48.83px | 121.5px | 177.42px |
Matching ratio to content density
A practical heuristic: the more reading on the page, the gentler the ratio should be.
| Page is mostly… | Recommended band | Why |
|---|---|---|
| Body text (articles, docs) | 1.067–1.2 | Keeps headings close to body so the eye is not yanked around mid-read. |
| Mixed (landing, product) | 1.25–1.414 | Clear hierarchy for scanning, without losing readable body. |
| Display (hero, portfolio) | 1.5–1.618 | Headlines carry the page; body is secondary, so big jumps work. |
Cookbook
The same hierarchy at three different tones, generated by the builder. Each block is real output — note how the only change is the ratio, and how differently each reads. For the full catalogue of ratios and their values see the ratios reference; to pick a fallback that matches the brand on every OS, the system font stack generator pairs well.
Calm / reading-first (Minor Third, 1.2)
ExampleA quiet scale for a documentation site. Headings sit just above body — the reader is never pulled out of the text. 16px base, 6 steps.
/* base: 16px · ratio: 1.2 · steps: 6 — calm */
: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 */
}Balanced / confident (Major Third, 1.25)
ExampleThe safe default for a SaaS landing page. Clear hierarchy, headings have presence, body stays readable. 16px base, 8 steps.
/* base: 16px · ratio: 1.25 · steps: 8 — balanced */
: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 */
}Dramatic / editorial (Golden Ratio, 1.618)
ExampleA luxury brand homepage. Display type dominates; body is intentionally small by comparison. Watch the top — by 2xl you are already past 67px. 16px base, 6 steps.
/* base: 16px · ratio: 1.618 · steps: 6 — dramatic */
:root {
--font-size-xs: 0.382rem; /* 6.11px */
--font-size-sm: 0.618rem; /* 9.89px */
--font-size-base: 1.000rem; /* 16px */
--font-size-lg: 1.618rem; /* 25.89px */
--font-size-xl: 2.618rem; /* 41.89px */
--font-size-2xl: 4.236rem; /* 67.77px */
}Differentiate from a Major-Third-saturated market
ExampleIf your whole category uses 1.25, a Perfect Fifth (1.5) gives noticeably bolder headings that read as a distinct brand at a glance — without going as far as Golden Ratio. 16px base, 7 steps.
/* base: 16px · ratio: 1.5 · steps: 7 — distinct */
:root {
--font-size-xs: 0.444rem; /* 7.11px */
--font-size-sm: 0.667rem; /* 10.67px */
--font-size-base: 1.000rem; /* 16px */
--font-size-lg: 1.500rem; /* 24px */
--font-size-xl: 2.250rem; /* 36px */
--font-size-2xl: 3.375rem; /* 54px */
--font-size-3xl: 5.063rem; /* 81px */
}Use the fluid block so drama scales down on mobile
ExampleA dramatic ratio can overwhelm small screens. The builder's fluid block shrinks each step toward its 0.85× min on narrow viewports, taming the drama where there is no room. Keep this block for editorial scales especially.
/* Golden-ratio xl, fluid — calms on small screens */
@media (min-width: 320px) {
:root {
--font-size-xl: clamp(2.225rem, 1.963rem + 1.310vw, 3.011rem);
}
}
/* at 320px ≈ 35.6px, at 1280px ≈ 48.2px — never a fixed 41.9px wall */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.
Dramatic ratio swamps a reading-heavy page
Watch outGolden Ratio looks stunning on a hero and miserable in a 2,000-word article — headings tower over the body and the rhythm of reading breaks. Match the ratio to content density (the table above): the more text per page, the gentler the ratio. Do not fix this with per-heading overrides; change the ratio.
Flat ratio makes a landing-page hero feel timid
Watch outMinor Second (1.067) on a marketing hero leaves the H1 barely larger than body — no drama, no focal point. Reading-first ratios belong on reading-first pages. For a hero-led layout, step up to at least Major Third, or Perfect Fifth for real impact.
You want an in-between ratio for a precise brand feel
By designThe page dropdown has eight fixed presets — there is no 1.3 or 1.45. If brand guidelines specify a bespoke ratio, generate it through the runner API with a numeric scaleRatio. For the web page, choose the nearest preset; the difference between, say, 1.414 and 1.45 is usually below perceptual threshold.
Top size is far too large for the available layout
ExpectedDramatic ratios compound fast — Golden at 8 steps from 16px exceeds 177px at the top. That is the ratio doing its job, not a bug. If you have no room for it, reduce the step count or drop a band, rather than capping individual sizes and breaking the harmony.
Brand wants drama but the body must stay readable
SupportedUse a dramatic ratio but lift the origin so the base sits higher in the scale, keeping more steps above it for display while the body stays at a comfortable size. The origin is not on the page UI (default 2) — adjust it via the runner API if you need this precise control.
Matching a competitor's ratio dilutes your brand
Watch outIf every rival uses Major Third, copying it makes your typography indistinguishable. A deliberate step to Perfect Fifth or down to Minor Third reads as a different brand at a glance. Differentiation is a legitimate reason to pick a less-common ratio — just keep it usable for your content.
Switching ratio late forces a redesign pass
Watch outBecause every size derives from the ratio, changing it after the design is built recomputes the whole hierarchy and every component that referenced a token shifts. Decide the brand ratio early. If you must change it, regenerate, re-paste, and budget a visual QA pass across all templates.
Small steps round to similar sizes on gentle ratios
ExpectedAt Minor Second (1.067), adjacent steps differ by ~1px, and after rounding two steps can look almost identical (e.g. 16px vs 17.07px). That subtlety is the point of a calm scale, but if you need clearly distinct sizes, move up to at least Minor Third (1.2).
Frequently asked questions
Does the ratio really change how the brand feels?
Yes, more than most people expect. The same fonts and colours read as calm at Minor Third (1.2) and as dramatic at Golden Ratio (1.618), purely because the ratio sets how far headings sit above body text. It is one of the highest-leverage typography decisions you make.
Which ratio should a documentation site use?
A gentle one — Minor Second (1.067) to Minor Third (1.2). Docs are reading-first; you want headings close to body so the eye is not yanked around mid-paragraph. Bigger ratios make long reading feel choppy. Pair it with an 18px base for extra comfort.
Which ratio for a marketing landing page?
Balanced — Major Third (1.25) is the safe default, Perfect Fourth (1.333) if you want a bit more expressiveness. These give headings clear presence for scanning while keeping body readable. Save Perfect Fifth and Golden Ratio for hero-led or editorial layouts.
When is Golden Ratio appropriate?
When display type is the point and body is secondary — editorial, luxury, fashion, agency portfolios. It produces big, dramatic jumps and very large top sizes. Avoid it on content-heavy pages, where the towering headings break reading rhythm. Always check the Largest metric before committing.
Can I pick a ratio that's between two presets?
Not from the web page — the Ratio control is a dropdown of eight named values. For a bespoke number like 1.3, use the JAD runner's API with a numeric scaleRatio. In practice the perceptual gap between neighbouring presets is small, so the nearest preset is usually fine.
Should I match my competitors' ratio?
Usually no. Distinctive typography is part of brand identity — if your whole category uses Major Third, choosing Perfect Fifth or Minor Third makes you recognisably different at a glance. Differentiation is a valid reason to pick a less-common ratio, as long as it still suits your content.
How do I stop a dramatic scale from breaking on mobile?
Use the builder's fluid clamp() block. Each step shrinks toward its 0.85× minimum on narrow viewports, so a 42px headline tames to the mid-30s on a phone where it would otherwise wrap awkwardly. The fluid block is generated alongside the static one — keep it for any dramatic scale.
What base size pairs best with each tone?
16px works for all three. For calm/reading-first tones consider 18px to boost comfort on long copy. For dramatic tones, 16px is fine — the ratio already supplies the drama, so a bigger base would only push the top sizes even higher.
How many steps should each tone use?
Calm tones often need fewer (5–7) — a quiet hierarchy does not climb far. Dramatic tones may use more (8–10) to give display type room to grow. But more steps with a big ratio means huge top sizes, so let the Largest metric guide you rather than a fixed number.
Can I change the ratio after launch?
You can, but every size recomputes and every component referencing a token shifts, so budget a full visual QA pass. It is much cheaper to pick the brand ratio early. The hybrid approach (modular base + a few overrides) localises later churn — see the modular vs arbitrary guide.
Where can I see all eight ratios with their values?
The named ratios reference lists every preset with its numeric value and the sizes it produces from a 16px base, so you can compare tones side by side before choosing.
Does the tool show me the brand impact visually?
Not directly — the result panel shows the CSS and four metrics (Steps, Ratio, Smallest, Largest), not a rendered specimen. Paste the tokens into your real templates with real copy to judge the tone. The numbers tell you the range; only your actual content tells you the feel.
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.