For a design system's type scale, how do you choose the ratio and the number of steps for a data-dense freelance job marketplace?

## Two numbers that compound A **modular type scale** is defined by a **base size** and a **ratio**: each step up multiplies by the ratio, each step down divides by it. Because the ratio is applied repeatedly, small differences in the ratio become large differences a few steps out. The table shows a base of 16 across five common ratios. | Ratio | 2 steps down | 1 step up | 3 steps up | 6 steps up | |---|---|---|---|---| | 1.125 | 12.6 | 18 | 22.8 | 32.4 | | 1.2 | 11.1 | 19.2 | 27.6 | 47.8 | | 1.25 | 10.2 | 20 | 31.3 | 61.0 | | 1.333 | 9.0 | 21.3 | 37.9 | 89.8 | | 1.5 | 7.1 | 24 | 54 | 182.3 | Two things stand out. A large ratio reaches headline sizes in very few steps, leaving almost nothing between body text and a heading. And a large ratio pushes the steps below the base down fast, into sizes too small to read comfortably. ## Matching the ratio to the product The ratio is really a decision about **how much contrast neighbouring sizes should have**. - **Dense product interfaces** — a job marketplace's search results, proposal forms, contract details, earnings tables — show a lot of text at once and need several sizes close to body text: metadata, labels, card titles, section headings. A ratio of about 1.125 to 1.25 keeps those sizes usable and close together. - **Editorial and marketing surfaces** — the landing page that recruits clients, a long-form guide for freelancers — have fewer levels and want strong contrast between a headline and the text. A ratio of about 1.333 to 1.5 gives that drama. - **A product with both** can use one moderate ratio and accept compromise, or publish a tighter scale for the app and a more dramatic set of display sizes for marketing pages. Either is defensible; the cost of two sets is more documentation and more chances to mix them up. These ratio ranges are common practice with a reason behind them, not rules any standard sets. A useful sanity check is to set one real screen — a job search results page with filters, cards and a header — at two candidate ratios side by side. The better ratio is usually obvious once real content fills the sizes, rather than a specimen sheet of sample sentences where every ratio looks elegant. ## Choosing the number of steps The step count should come from the product, not from the ratio. 1. **Inventory text roles.** List every distinct kind of text in the product: caption and metadata, body, emphasized body, card title, section heading, page title, display headline. 2. **Merge roles that share a size.** Many roles differ in weight or color rather than size; only distinct sizes need steps. 3. **Place the roles on the scale.** Body goes at the base; the others go on the steps nearest their intended prominence. 4. **Add little headroom.** One spare step at the top is usually enough; unused steps invite improvised use. 5. **Stop.** Commonly the result is around six to ten sizes. ## Signs the choice is wrong | Symptom | Likely cause | |---|---| | Teams keep adding sizes between steps | Ratio too large, or a real role missing | | Two adjacent steps look identical in use | Ratio too small, or too many steps | | The smallest step is hard to read | Ratio too large for the bottom of the scale | | The largest headline needs a step that does not exist | Too few steps above the base | | Nobody uses half the steps | Too many steps for the product's roles | ## The bottom of the scale matters as much as the top Discussions of ratios usually focus on headlines, but dense products spend most of their text below and at the base. A ratio that looks elegant at display sizes can leave the caption step at 7 or 9, which then gets quietly overridden in every product. Check the smallest step you intend to use before committing to a ratio, and remember that computed steps are rounded and occasionally hand-tuned afterwards — the ratio chooses the shape, not every final number.