A type scale you can defend

Most type scales are a list of numbers somebody liked. That works until the day you want the whole page a little larger, and you discover the numbers were never related to each other at all.

A scale is defensible when every size is derived, and when each size belongs to a role rather than to a place. Not "the h2 on the article page" but "a section heading" — because the moment a size is attached to a location, the same heading in a second location gets a second number, and the two drift.

A ratio, and the honesty to break it

Every size on the page comes from one body size and one ratio:

s_{n} = s_{0} \times r^{n}

where $s_{0}$ is the body size, $r$ the ratio and $n$ the number of steps away from it. Pick a ratio and generate from the body size. A minor third ( $r = 1.2$ ) is quiet and works for text-heavy pages; a perfect fourth ( $r = 1.333$ ) is dramatic and runs out of room quickly on a small screen.

A modular scale drawn as bars: each size is the one below it times the ratio, so the steps agree with each other instead of with a list of numbers

Step	Minor third	Perfect fourth
Body	17 px	17 px
+1	20 px	23 px
+2	24 px	30 px
+3	29 px	40 px

Solving it the other way round is the useful direction. Given a body size and the largest size the page actually needs, $k$ steps above it, the ratio is not a matter of taste at all:

r = \sqrt[k]{\frac{s_{k}}{s_{0}}}

And the warning below has a number attached to it, which is the part nobody writes down. Round at every step and each rounding is carried into the next multiplication:

{\tilde{s}}_{n} = round ({\tilde{s}}_{n - 1} r), {\tilde{s}}_{0} = s_{0}

Every step adds at most half a pixel, and every earlier half-pixel is multiplied again on the way up — so the drift is a geometric sum, and it has a closed form:

| {\tilde{s}}_{n} - s_{0} r^{n} | \leq \frac{1}{2} \sum_{i = 1}^{n} r^{n - i} = \frac{r^{n} - 1}{2 (r - 1)}

At $r = 1.2$ that is $2.7$ px by the fourth step: a heading a whole rounding apart from the scale it was supposed to have come from.

Then allow yourself to round. A scale that produces 27.65px is a scale nobody will follow, and the rounding is not a compromise: the eye cannot tell 27.65 from 28, and the person maintaining the page can.

Tip

Round once, at the end. Rounding each step and then generating the next from the rounded value compounds the error, and by the fourth step the scale is no longer the ratio you chose.

Leading and tracking travel with the size

The mistake that survives longest is treating leading as one number. Large text needs proportionally less leading than small text, and display sizes usually want negative tracking while small sizes want a touch of positive. So a role is not a size, it is a triple: size, leading, tracking. Set all three or you will set them by accident later.

This site's own roles, as one table rather than nine scattered declarations — which is the whole discipline in miniature, because a table with a hole in it is visible and a stylesheet with a hole in it is not:

Role	Size	Leading	Tracking
Caption	13 px	1.55	+0.01 em
Small	14 px	1.55	+0.01 em
Body	17 px	1.70	0
H3	20 px	1.40	0
H2	24 px	1.30	−0.005 em
Title	29 px	1.20	−0.01 em

Read down any column and the trend is monotone. That is the test worth keeping: a role whose leading bucks the trend was set by accident, and the table shows it in a way nine CSS rules never will.

A ratio, and the honesty to break it

Leading and tracking travel with the size

Related posts