A type scale is one base size and one multiplier. Each step up is the previous size times the ratio, each step down is a division, and the whole set follows from two numbers rather than from a series of individual decisions.
The reason to use one is consistency rather than beauty. Sizes chosen individually drift towards each other until two of them are close enough to look like a mistake, and a scale makes every step deliberately distinguishable.
Which ratios are used?
A handful, borrowed from musical intervals because that is where the naming came from.
| Ratio | Name | Character |
|---|---|---|
| 1.125 | major second | very gentle |
| 1.2 | minor third | subtle |
| 1.25 | major third | the common default |
| 1.333 | perfect fourth | clear contrast |
| 1.5 | perfect fifth | dramatic |
| 1.618 | golden ratio | dramatic, few usable steps |
The trade is contrast against range. A small ratio gives many usable sizes that sit close together; a large one gives obvious hierarchy and runs out of useful sizes after three or four steps, because the fifth step is already enormous.
The usual compromise is a smaller ratio for body and interface text and a larger one for display sizes, which is two scales rather than one and is worth the small inconsistency.
Does the golden ratio deserve its reputation?
Less than it has. It is a perfectly good ratio for a type scale — large, clear, and quick to run out of steps — and the claims made for it as a universal principle of beauty do not hold up.
The historical evidence for it being deliberately used in classical architecture and painting is thin, and most of the famous examples are retrofitted by drawing rectangles until one fits. It appears in nature for reasons of growth efficiency rather than aesthetics.
None of that makes it a bad choice. It makes it one option among several rather than the answer, and 1.25 or 1.333 is easier to work with for most interfaces.
What about line length?
Between about 45 and 75 characters for body text, with the mid-sixties often cited as the ideal. Longer lines make it hard to find the start of the next one; much shorter ones break the rhythm of reading.
The measure is characters rather than pixels or centimetres, because it is really about how far the eye travels between line breaks relative to the size of what it is reading. A wide column of small text and a narrow column of large text can have the same measure.
That is why a maximum width expressed in a character-relative unit works better than one in pixels. It stays correct when the font size changes, which a fixed pixel width does not.
How much line spacing?
Around 1.4 to 1.6 times the font size for body text, and less as text gets larger. A heading at the same proportional spacing as body text looks loose, because the spacing that helps at small sizes becomes a gap at large ones.
Line length and line spacing interact. Longer lines need more spacing to help the eye return to the right one, so a wide column with tight leading is harder to read than either problem alone suggests.
Spacing set as a plain multiplier rather than a fixed measurement is what makes this scale correctly. Tying it to a fixed height breaks the relationship the moment the size changes.
Should sizes scale with the viewport?
Between limits, yes. Text that grows continuously with the screen ends up enormous on a large display and unreadable on a small one, so the useful version clamps between a sensible minimum and maximum.
The accessibility caution from the CSS article applies here: a size expressed only in viewport units ignores the reader’s own text size setting, which takes away their ability to make text bigger.
Including a relative unit in the scaling part restores it. The result grows with the screen and still responds to the reader, which is what fluid type is supposed to do.
What should the steps be named?
By role or by relative position, not by pixel value. A size called "large" survives a change to the ratio; one called "twenty-four" becomes a lie the moment the scale is adjusted.
Numbered steps work well when the numbers describe position rather than measurement — a scale running from one to seven, or one using a step of a hundred, stays honest under any ratio.
The test is whether changing the base size requires renaming anything. If it does, the names were recording measurements rather than decisions.
Questions people ask
Should every step be used? No. A scale defines what is available, and most designs use four or five of its steps.
What about the smallest step? Anything below about twelve pixels is hard to read on a phone, which sets a practical floor whatever the ratio says.
How many steps do I need? Usually five to seven. More than that and adjacent sizes stop being distinguishable.
Should the base be 16 pixels? It is the browser default and a sensible base. Changing it changes every reader’s expectations.
Do headings need the same ratio? Not necessarily. A separate display scale is a common and defensible choice.
Does the scale apply to spacing too? It can, and a spacing scale on a simple doubling is usually easier to work with.
Pick the ratio, then generate the rest. The golden ratio calculator works out the steps for that proportion, and the fluid typography calculator and clamp generator turn a pair of sizes into a value that scales between them.