2.1 What Is a Typographic Scale?

A typographic or type scale is a progression of font sizes. I'm sure at some point in your life you saw a music scale, right, with the notes going from low to high. Well, a type scale is the same. It represents font sizes from small to large. Now, being a scale, we have a ratio. This is the defining factor. This is what allows us to harmoniously progress from one size to the next. The scale I showed you previously uses a ratio of 1.5. It's what we call a perfect fifth. That means that any font size is exactly 1.5 times bigger than the one before it. For example, 1.5 rem is 1.5 times bigger than 1 rem. 3.375 rem is 1.5 times bigger than 2.25 rem, and so on. This allows us to easily create a type scale by starting from a set value and then using a ratio of our choosing. For example, let's assume our paragraph or body text will have a font size of 16 pixels. Also, let's assume we want to use the Golden Ratio, which is 1.618. Our H6 element will be 16 x 1.618. That rounds off to 26 pixels. Now, 26 times our ratio, which is 1.618, gives us 42, and so on and so forth, we get 68, 110, 177 and 287 pixels. This is a Golden Ratio Type Scale. And just by changing the ratio, you can create any scale you want. Now, this also goes the other way around. So if you want font sizes that are smaller than the body text, which in our case is 16 pixels, then you will divide the value by the ratio instead of multiplying it. In our scale, the values smaller than 16 pixels would round off to 10, and then 6 pixels. And that's how you can create a type scale. Now, while you can use any ratio you want, there are a few ratios that create really harmonious scales. And we're gonna have a look at those in the next lesson.