The (Slightly) Longer Version
However, we want to dig a little deeper into the topic of scales and explore their usage. This document is based on various resources from the web, most notably on professional tools like typescale.com, https://www.modularscale.com/ or https://type-scale.spencermortensen.com/. I did not reverse engineer these tools but took some inspiration from it. This document is for educational purposes only and not a replacement for these tools.
So where do these scales come from?
The origin of these scales come from traditional typesetting in print production. We might know these from applications like Adobe InDesign. Below you see a table off a traditional scale.
The increase of these sizes is not a continuous function. As you can see in this graph below, we first increase by +1, then by +2, then by +3, and then by +12. Since we work in code and not in lead we don't have to constrain us to these fixed point sizes.
As stated before a good layout is based on rhythm. A recurring pattern that the reader can learn and use to navigate or document. These rhythms can be created using a function. For example the golden ratio, the Fibonacci sequence, or the musical scale. In this document, we will focus on the golden ratio and the musical scale.