Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Lessons:6Length:18 minutes

Next lesson playing in 5 seconds


Free Preview: A Beginner’s Guide to Using Typographic Scales


  • Overview
  • Transcript

Using a typographic scale is essential for creating balanced and harmonious font sizing for your project. Typographic scales are used in print, web design, and app design, and understanding the basics will definitely make you a better designer.

In this short course, you’ll learn how to create a type scale and how to choose the right one for your project. You’ll also explore some of the commonly used scales. Towards the end of the course, you’ll learn how to make a type scale responsive and become familiar with some automation tools.

1. Introduction

1.1 Welcome

Hello, and welcome to an Envato Tuts+ course. I'm Adi Purdila, and in this short course, you'll learn everything you need to know to get started with typographic scales. Using a type scale is essential for creating a balanced and harmonious font sizing for your project, regardless of what that is. It's used in print, web design, app design, and knowing the basics will definitely make you a better designer. Now, here's what you'll learn in this course. First, we'll see what is a type scale and how to create one. Then we'll explore the different types of scales that are currently being used. And lesson three, we'll figure out how to select a scale depending on your project, and then we'll take that and make it responsive. Finally, in lesson five, we'll check out some tools you can use to automate the whole process of working with type scales. We have a lot to go through, so let's kick things off with lesson number one. See you there.

2. Using Typographic Scales

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.