In a design system, what is a modular type scale, and how does a 1.25 ratio from a 16 base generate its sizes?
answer
- a short list, not free choice
- start from the body size
- multiply, do not add
- the same proportion at every step
- a musical interval name
basics
~20 sA modular type scale is a small set of font sizes where each step is the previous one multiplied by a fixed ratio. From a base of 16 at 1.25, the steps run 12.8, 16, 20, 25, 31.25 and 39.06, then get rounded.
solid answer
~40 sA **modular type scale** fixes the font sizes a product may use by starting from a **base size** — usually the body text size — and multiplying or dividing by a constant **ratio** at each step. With a base of 16 and a ratio of 1.25, going up gives 20, 25, 31.25, 39.06 and 48.83; going down gives 12.8 and 10.24. Because every neighbouring pair shares the same proportion, the jumps look even from caption to display size, which an additive rule such as adding 4 per step cannot achieve. The computed values are then rounded to usable numbers and published as tokens. The point is constraint: instead of someone picking 15, 17 or 22 for a job-listing card on a freelance marketplace, every size comes from one short, predictable list.
go deeper
Recall that a modular scale is a base size times a repeated ratio, and be able to compute a step or two above and below 16 at 1.25.
Explain why multiplying gives evenly perceived steps where adding does not, and why the ratio names are convention rather than rules.
Show you can judge whether an existing product's sizes actually follow its scale, and what to do when they do not.
Discuss the scale as a constraint that reduces decisions across many teams, and when the cost of that constraint outweighs its benefit.
## What a type scale is A **type scale** is the fixed list of font sizes a product is allowed to use. A **modular** type scale generates that list from two numbers: - a **base size**, usually the size of body text, because body text is the most common and the anchor every other size is judged against; - a **ratio**, the constant factor between one step and the next. Each step up multiplies the previous size by the ratio; each step down divides by it. The result is a geometric series: every neighbouring pair of sizes has the same proportion. Sizes here are unitless on purpose — the same scale is expressed in whatever size unit each platform uses, on the web and on native mobile alike. ## The arithmetic for base 16 and ratio 1.25 | Step | Formula | Exact value | One common rounding | |---|---|---|---| | -2 | 16 / 1.25 / 1.25 | 10.24 | 10 | | -1 | 16 / 1.25 | 12.8 | 13 | | 0 (base) | 16 | 16 | 16 | | +1 | 16 x 1.25 | 20 | 20 | | +2 | 20 x 1.25 | 25 | 25 | | +3 | 25 x 1.25 | 31.25 | 31 | | +4 | 31.25 x 1.25 | 39.06 | 39 | | +5 | 39.06 x 1.25 | 48.83 | 49 | | +6 | 48.83 x 1.25 | 61.04 | 61 | On a freelance job marketplace, the -1 step might set metadata such as the posting date on a job card, the base sets the job description, +1 the job title, and the top steps the headlines on the marketing pages that recruit new clients. ## Why multiply instead of add People perceive size differences **relatively**: the jump from 12 to 16 feels large, while the jump from 60 to 64 barely registers. A scale that adds a fixed amount per step therefore looks crowded and jumpy at the small end and flat at the large end. 1. With addition (say, plus 4 per step), 12 to 16 is a 33 percent jump, but 60 to 64 is under 7 percent. 2. With multiplication by 1.25, every jump is 25 percent, so the steps read as evenly spaced across the whole range. 3. As a result, a heading two steps above body text looks as distinct at mobile sizes as a display headline two steps above a subheading does on a large screen. ## Where the ratios come from Many common ratios borrow names from musical intervals, because a musical scale is also built from fixed frequency ratios. The names are convention and shorthand, not a standard anyone mandates. | Ratio | Interval name | Typical character | |---|---|---| | 1.125 | Major second | Very tight; subtle steps | | 1.2 | Minor third | Tight; common for dense interfaces | | 1.25 | Major third | Moderate; a frequent middle ground | | 1.333 | Perfect fourth | Pronounced steps | | 1.5 | Perfect fifth | Dramatic; suits editorial headlines | | 1.618 | Golden ratio | Very dramatic; few usable steps | ## What the scale buys a product team - **Fewer decisions.** Designers and engineers choose a step, not a number, so two teams building job cards land on the same sizes. - **Consistent proportion.** Hierarchy looks deliberate because every jump follows the same rule. - **A shared vocabulary.** A design review can say one step larger, and everyone knows exactly what that means. - **Cheaper change.** When sizes are published as tokens, adjusting a step updates every product that references it. - **Platform parity.** The same list of steps can be expressed on the web, on native mobile and in design files, so a job card keeps the same proportions everywhere it appears. ## What a scale is not The scale is only the list of **raw sizes**. It does not decide weight, line height or which size a page heading uses; those decisions belong to the text styles built on top of the scale. Nor is the computed series sacred: steps are rounded to usable values and sometimes hand-tuned, and a scale can drop steps nobody needs. The ratio generates a good starting list; the product's real text roles decide the final one.
- Why is the base usually the body text size rather than the smallest size?Body text is the most common text and the size readers are anchored to, so fixing it first guarantees the most-read text is right. Every other step is then defined relative to it: a few steps down for captions and metadata, several steps up for headings and display text.
- What happens to the scale if the product later changes its body size from 16 to 15?Every computed step changes, because each is derived from the base. That is why systems publish the rounded results as tokens: changing the base becomes a deliberate re-derivation and review of the whole list, not a silent drift of one value.
A type scale works like a musical scale: the notes sit at fixed frequency ratios, and a melody picks from those notes rather than from any pitch at all. The steps sound evenly spaced because they share a ratio, not a fixed difference — and several common type-scale ratios even carry interval names, 1.25 being a major third.
saying these in an interview costs you the question
- A type scale is any list of sizes the designers happened to like.
- Each step adds a fixed number of units to the one before.
- The 1.25 ratio is required by accessibility standards.
- Computed values such as 31.25 must ship unrounded or the scale is invalid.
- A type scale defines weight, line height and color as well as size.