Updated July 10, 2026

Type Scale: The Practical Guide

A type scale is a limited, ordered set of font sizes generated from two decisions — a base size and a ratio — instead of sizes picked one by one. Every size on the scale relates to every other by the same proportion, which is what makes a page read as composed rather than assembled. This hub collects our guides on choosing, building, and using type scales; the fastest overview is to open a working scale in Scale Composer and drag the ratio.

Start with the ratio

The ratio is the personality of your typography: small ratios (1.125–1.25) make subtle, dense hierarchies for product UI; the middle range (1.333–1.414) carries content sites comfortably; large ratios (1.5–1.618) produce dramatic editorial hierarchy that spends space quickly. The articles below walk through the trade-offs, including an honest look at the famous golden ratio — where 1.618 earns its reputation and where it wastes your top steps.

The reason one ratio reads as composed is perceptual, not mathematical: when every jump between sizes is the same proportion, the eye learns the relationship once and stops re-measuring — hierarchy registers before reading begins. Sizes picked one by one carry no shared signal, which is why ad-hoc typography feels noisy even when each individual size looks reasonable on its own.

Notes: the part most scale calculators skip

A pure ratio sequence leaves gaps exactly where interfaces need precision — nothing between 16px and 21px, yet a lead paragraph wants 18. Dividing each ratio interval into notes, the way an octave divides into notes, produces in-between sizes that still belong to the scale. It’s the difference between a scale you admire and a scale you can actually ship.

The vocabulary is borrowed from music deliberately — Musical Intervals in Typography explains what notes do in a scale and why the analogy holds up. Notes do not mean more named sizes, though: How Many Font Sizes Does a Design System Need? argues the answer stays around nine to twelve even with in-between sizes available, because every named size should be a visible decision rather than a byproduct of the math.

One scale, whole system

The same base and ratio that generate your font sizes can generate more: a baseline unit of half the base for line heights, the spacing steps of your spacing system, and grid measures that step through the same progression. Type is where the scale usually starts, but the payoff compounds when the rest of the system shares it — change one number and everything retunes together.

That is the premise of Scale Composer: one scale drives typography, color, spacing and grid, and exports them together. The layout grid hub covers the column side of that system; and if the sizes should also adapt between viewports, fluid typography shows how the same scale can interpolate with CSS clamp() instead of jumping at breakpoints.

Where to start reading

If the concept is new, start with What Is a Modular Type Scale? — it builds the core idea from one worked example. Then settle the two inputs: Why 16px Is the Default Base Font Size covers the base, and the ratio guides above cover the multiplier. With those fixed, the application guides take over: Heading Sizes maps the scale onto h1–h6, Line Height: The Baseline-Grid Method extends it into vertical rhythm, and rem vs px vs em covers the units the scale ships in. 7 Type Scale Mistakes works as a closing checklist to run against the system you just built.

Guides in this hub

Try it before you read on

Theory sticks better with your own numbers: open a dense product-UI scale — ratio 1.2, the kind that fits dashboards — then raise the ratio toward 1.5 and watch the same five levels turn editorial. Ten seconds of dragging explains the ratio table better than any prose.

Frequently asked questions

What is a good type scale ratio?

It depends on how text-dense your product is. Ratios between 1.2 and 1.333 suit dense product UI, where many usable sizes need to sit close together; 1.414 and up suits editorial layouts and landing pages with few hierarchy levels and short text.

What is the best base font size?

16px is the browser default and a sensible floor for body text on screens. Reading-heavy sites often do better at 18px. Whatever you choose, the base anchors everything else — sizes and baseline both derive from it.

How many font sizes should a design system have?

Fewer than most teams expect — around 9 to 12 named levels (caption, body sizes, heading levels, display) cover a wide range of products. A scale helps by making every additional size a visible decision instead of quiet drift.

What is a modular scale in typography?

A small, fixed set of font sizes derived from one base size multiplied by a constant ratio, so every size relates to every other mathematically. Subdividing each ratio step into "notes," the way an octave divides into notes, gives the scale usable in-between sizes.

Should line height be on a scale too?

Yes — a common convention derives a baseline unit of half the base size (8px on a 16px base) and sets every line height as a multiple of it. Text then shares one vertical rhythm instead of per-element values.

Should font sizes use px, rem, or em?

rem for font sizes in code. It scales with the user's browser preference, which px ignores — and if your scale is defined against a 16px base, the rem values map onto it directly.