I’m currently doing a mockup for a website that has a few large typographic elements. For scale, I’m using the one provided by Typeplate (18, 21, 24, 36, 48, 60, 72, 90, 117), but after spending some time looking at the scale, which is made by multiplying 18 by various numbers (1, 1.1667, 1.3333, 2, 2.6667, 3.3333, 4, 5, 6.5), I’ve been unable to figure out how to calculate larger font sizes that adhere to the scale.
Is there a way for me to calculate the proper size for fonts upwards of 250 or is there a better scale that has a much higher range? I’m not committed the scale I’m currently using, so if there is a more visually pleasing one, I’d be more than happy to switch to that, but my primary concern is keeping large fonts from disrupting the harmony of the website.
Note that most of the following is nothing but an educated guess. I do not know what actually motivated the Typeplate scale
If you mulitply 18 repeatedly with ∛2 ≈ 1.26 you get the following sequence which, when rounded to “standard” font sizes yields the Typeplate scale with some exceptions:
- 18.0 → 18
- 22.7 → 21
- 28.6 → 24 – This is out of place, 28 would fit better
- 36.0 → 36
- 45.4 → 48
- 57.1 → 60
- 72.0 → 72
- 90.7 → 90 – not a standard font size, as far as I can tell
- 114.3 → 117 – definetely not a standard font size
Ignoring the rounding at first, such a constant factor achieves that the quotient of adjacent font sizes is always the same and so is the quotient of font sizes two steps apart and so on. This yields a sort of self-similarity of font sizes. For example using such font sizes, I can create the following arrangement of letters:
Due to using such font sizes, the red content of the right part is geometrically similar to that of the left part – the only difference lies in scale.
You can compare this to standard paper formats which you can translate into each other when scaled with a factor of √2 ≈ 1.41.
Of course you do not need to use each font size for the same letters/text, but still the relation may be regarded as aesthetically pleasing. Compare the following:
The top part uses a font-size increase as described above, the bottom part uses a more or less arbitrary increase.
Finally, the rounding to standard font sizes is useful at small font sizes, where hinting matters. High-quality fonts contain bitmaps for such standard font sizes (sometimes tweaked manually), while every other font size has to be rendered on the fly. In such a case, you get a better result for standard font sizes and thus they are preferrable. At high font sizes, hinting is not that important anymore, which may explain that the last entries in the Typeplate scale are non-standard.