waldyrious
commented
4 years ago Update: After some experimentation, I've decided to use a hexatonic scale instead — which, as the name indicates, contains 6 steps, rather than 5, and whose size increments are therefore based on the 6th root of 2 (≈ 1.122462...). That way, we can use the first step (i.e. a non-zero increment) for the smallest heading, to ensure it is rendered at a bit larger font size than regular text.
The resulting heading sizes will change as follows:
| Heading | Current sizes | New sizes |
|---|---|---|
| h1 | 25/5 = 200.00% | 26/6 = 200.00% |
| h2 | 24/5 = 174.11% | 25/6 = 178.18% |
| h3 | 23/5 = 151.57% | 24/6 = 158.74% |
| h4 | 22/5 = 131.95% | 23/6 = 141.42% |
| h5 | 21/5 = 114.87% | 22/6 = 125.99% |
| h6 | 20/5 = 100.00% | 21/6 = 112.25% |
The default heading sizes are not quite appropriate -- h6 is smaller than body text, which doesn't make much sense IMO for a heading.
Since h1 appears to be consistently sized at 2em (200%) by browsers' native stylesheets, it would be nice to have a progression from h6 at the minimum acceptable heading size (100% of body text size) to h1 at 200%.
Now, one would think that the most natural way of doing this would be using a linear scale (100%, 120%, 140% ... 200%). However, that results in apparent font sizes that paradoxically don't grow linearly. Below is the result of this scale, where the left image is using the default serif font, and the right image is using Palatino (introduced after #25). We can see that the intermediate heading sizes "bulge out" of the red line that indicates a constant growth rate:
Indeed, if we think some more about this, we realize that such a scaling method is not even mathematically sound (in the sense of describing a pattern that can be cleanly generalized), since it wouldn't work well if we were to extend it to even smaller heading sizes: we'd quickly reach size zero at h12, and beyond that we'd have negative font sizes!
A more elegant solution would then be using an exponential function to fit the two extremes (100% at the lower end, and 200% at the upper end), so that we could theoretically continue to decrease the size and never reach zero. The natural exponential function, f(x)=ex (aka exp(x)), is the perfect candidate.
We already know that
exp(0) = 1, so we can express the lower limit in terms of the exponential function. We now wantexp(?) = 2to also express the upper limit in the same way; and (as brilliantly elucidated by 3Blue1Brown), we can figure out the?by using the natural logarithm:? = ln(2) ≈ 0.693.Now, to cover the 6 heading sizes, we just need to go from 0 to 0.693 in five steps of 1/5 that length and take the value of the exponential function at each of those points. Once we do this, WolframAlpha helpfully points out,+%7Bn,+0,+5%7D%5D) that the result can even be simplified to the neat sequence
2^(0/5), 2^(1/5), 2^(2/5), 2^(3/5), 2^(4/5), 2^(5/5), thus yielding the final result:And indeed, behold the final rendered page, showing the headings growing linearly in apparent size, even though they're growing exponentially in actual size (again, default serif font on the left, Palatino on the right):
(It would be nice to use
calc()to provide precise values rather than approximations, but alas, only elementary arithmetic operators are available, and they are not sufficient to calculate fractional exponents.)Prior art
Interestingly, this scaling factor (where each step represents an increase of 2^(1/5), i.e. the 5th root of two ≈ 1.1487...) does not seem to be included by default in neither Type-Scale.com nor ModularScale.com, but following their theme of applying musical intervals to typography, we could equate the scale used here to five-tone equal temperament (just like common musical intervals refer to the 12-tone equal temperament, which divides the octave into 12 equal parts in a logarithmic scale, with a ratio equal to 2^(1/12), i.e. the 12th root of 2 ≈ 1.05946).
Owen Gregory's "Composing the New Canon: Music, Harmony, Proportion" has a nice table with typographic size ratios based on musical intervals of the 12-TET scale, as well as some background to the motivation for these scales.
The fact that all these tools and proposals use 12-TET as a basis explains their lack of a ratio matching the one calculated here, which, as mentioned above, corresponds to 5-TET.
The following diagrams showcase the difference between the various divisions of the octave that one can make, where we can see that the steps of 12-TET don't match those of 5-TET: