Type Scale Generator & Modular Ratios
Build a modular type scale, plus the arithmetic: the ratio is a budget rather than a flavour, and whole pixels are a divisibility question.
Every size is the base times the ratio to the power of the step. Sizes marked as whole land on an exact pixel; the rest will be rasterised to something near them. Nothing is uploaded.
The ratio is a budget, not a flavour
A modular scale grows geometrically, so the ratio decides how many sizes you actually get before the type becomes unusable. Holding the top under 72px from a 16px base, the gentlest ratio here gives 23 steps and the boldest gives 3.
| Ratio | Value | Steps under 72px | At step 4 | At step 8 |
|---|---|---|---|---|
| Minor second | 1.0667 | 23 | 20.7px | 27px |
| Major second | 1.1250 | 12 | 25.6px | 41px |
| Minor third | 1.2000 | 8 | 33.2px | 69px |
| Major third | 1.2500 | 6 | 39.1px | 95px |
| Perfect fourth | 1.3333 | 5 | 50.6px | 160px |
| Augmented fourth | 1.4142 | 4 | 64.0px | 256px |
| Perfect fifth | 1.5000 | 3 | 81.0px | 410px |
| Golden ratio | 1.6180 | 3 | 109.7px | 752px |
The step count is a logarithm — log(cap/base) over log(ratio) — which is why it collapses so fast. A golden-ratio scale looks elegant in a specimen and gives you three usable headings; by step 8 it is asking for 752px type. If a design needs many distinct sizes, the ratio has to be small, and that is arithmetic rather than preference.
Whole pixels are a divisibility question with an exact answer
Write the ratio as a fraction p/q in lowest terms. Then base × (p/q)ⁿ is a whole number of pixels exactly while qⁿ divides the base — p never helps, since p and q share no factors. The rule was checked against the measured scale in 30 cases across 5 bases and called every one.
| Ratio | As a fraction | Whole steps from 16px | Why |
|---|---|---|---|
| Minor second | 16/15 | 0 | no power of 15 beyond 1 divides 16 |
| Major second | 9/8 | 0, 1 | 8^1 divides 16, 8^2 does not |
| Minor third | 6/5 | 0 | no power of 5 beyond 1 divides 16 |
| Major third | 5/4 | 0, 1, 2 | 4^2 divides 16, 4^3 does not |
| Perfect fourth | 4/3 | 0 | no power of 3 beyond 1 divides 16 |
| Perfect fifth | 3/2 | 0, 1, 2, 3, 4 | 2^4 divides 16, 2^5 does not |
A perfect fifth is 3/2, and 2⁴ divides 16 while 2⁵ does not, so it stays whole for steps 0 to 4 and then stops. A perfect fourth is 4/3 and no power of 3 divides 16 at all, so it never gets past step 0. Nothing about the sizes being "nicer" is involved.
For a base of 2ᵉ and a denominator of 2ᵏ the count is exactly ⌊e/k⌋ + 1. We first wrote that as "doubling the base buys one more step", which is false: it holds for a perfect fifth, where k = 1, and fails for a major third, where k = 2 and both 16 and 32 give three steps. Doubling adds one to e, which only crosses a multiple of k some of the time.
An irrational ratio never lands — with one exception
The golden ratio is irrational, so base × φⁿ is irrational for every n above zero and can never be a whole number of pixels. Checked to step 40 at 5 different bases: step 0 and nothing else, ever.
The augmented fourth is also irrational and behaves completely differently. √2 squared is 2, so every even power is a whole number and the scale lands on steps 0, 2, 4, 6 and 8 from a 16px base. Being irrational is not the property that matters — being irrational at every power is.
How to use
- Set a base size and pick a ratio.
- Every step is the base times the ratio to that power.
- Choose how many steps up you need.
- Sizes marked whole land on an exact pixel.
Frequently asked questions
How do I choose a ratio?
By how many distinct sizes you need, because the ratio is a budget rather than a look. From a 16px base holding the top under 72px, a minor second gives 23 steps and the golden ratio gives 3. The step count is a logarithm of the cap over the base divided by the logarithm of the ratio, which is why it collapses so quickly.
Why does the golden ratio produce huge sizes?
Because a modular scale grows geometrically and 1.618 grows fast. From 16px, step 4 is already 110px and step 8 is 752px. It looks elegant in a specimen and gives you about three usable heading sizes before the type is unusable on any real page.
Why are my font sizes fractional pixels?
Because most ratios are fractions that do not divide the base. Write the ratio as p over q in lowest terms: the size at step n is a whole number of pixels exactly while q to the power n divides the base. The numerator never helps, since p and q share no factors.
Which ratios stay on whole pixels longest?
The ones whose denominator is a power of two, from a power-of-two base. A perfect fifth is 3/2 and 2 to the fourth divides 16, so it stays whole for steps 0 to 4 from a 16px base. A perfect fourth is 4/3 and no power of 3 divides 16, so it never gets past step 0.
Does a bigger base give more whole steps?
Sometimes. For a base of 2 to the e and a denominator of 2 to the k, the count is exactly the floor of e over k, plus one. Doubling the base adds one to e, which only crosses a multiple of k some of the time: it helps a perfect fifth and does nothing at all for a major third.
Can an irrational ratio ever hit a whole pixel?
The golden ratio cannot, beyond step zero, and this was checked to step 40 at five different bases. The augmented fourth is the exception that proves the rule: root two is irrational but its square is 2, so every even power is a whole number and the scale lands on steps 0, 2, 4, 6 and 8.
Does this send anything anywhere?
No. Every scale is generated in your browser, and nothing is uploaded.
🔒 This tool runs entirely in your browser. Nothing you enter is uploaded, logged, or stored.