Typescale

How the sizes are calculated

Every step is the base size multiplied by the ratio, raised to the step number:

size = base × ratio ^ step

Step 0 is the base. Step 1 is one multiplication up, step −1 one division down. With a 16px base and a 1.25 ratio, step 2 is 16 × 1.25² = 25px.

The named ratios come from musical intervals, which is where the idea of a modular scale originally came from. A major third is 1.25, a perfect fourth 1.333, the golden ratio 1.618. Nothing about the maths requires those particular numbers — they are simply ratios that have been used long enough to be familiar.

The rem value is the pixel size divided by the base. Sizes are given in both because rem is what you should ship, and pixels are what you can judge by eye.

Choosing a ratio

The ratio decides how quickly sizes pull apart, and that has more effect on a layout than the base size does.

• 1.125 to 1.25 suits dense interfaces. Steps stay close, so a scale can have many of them without the largest becoming unusable.
• 1.333 to 1.414 suits editorial layouts, where a strong jump between a heading and its body text is the point.
• 1.5 and above produces dramatic hierarchy and very few usable steps. By the fourth step up from 16px, a 1.618 ratio is already past 110px.

Check the top of your scale at 375px wide before committing. A ratio that reads well on a desktop mockup often produces a heading that wraps three times on a phone.

Common questions

Should I use px or rem? Ship rem. It scales with the reader's browser font-size setting, which is the main accessibility mechanism people actually use. The pixel column is for judging the result, not for pasting into a stylesheet.

Why are the values so precise? Because they are the raw output of the multiplication. Rounding to whole pixels is reasonable, but do it consistently — rounding some steps and not others reintroduces the unevenness the scale exists to remove. Tick Whole pixels and every step is snapped at once, including the rem values, so the two columns still agree.

What does the whole-pixel option round to? Half a pixel and below goes down; anything above goes up. So 20.50px becomes 20 and 20.51px becomes 21. That is one step off the usual convention, which sends an exact half up: a scale that keeps halves down stays slightly closer to the ratio it came from, and the choice is only visible on the handful of steps that land exactly on the boundary.

Why is the ratio a list rather than a slider? Because there is nothing between the entries. The named ratios come from musical intervals, and the values between two of them are not a smaller or larger version of either — a slider implied a continuum that does not exist, and made every value but the endpoints awkward to hit.

Why is there no sm between xs and base? There is no step there. On a 1.25 scale from 16px, the step below the base is 12.8px, and the next is 10.24px. A 14px size, which most interfaces want, is not on the scale at all. Add it as a deliberate exception rather than pretending the ratio produced it.

How many steps do I need? Fewer than you expect. Most interfaces use five or six sizes. Generating nine and using four leaves the unused ones to drift into a design by accident.