2.3 How to Select a Scale for Your Project

Okay, so we know what kind of scales and ratios are out there and we know how to create a scale ourselves. But how do we pick the right one for our project, because they're not all the same. A major second scale is so much different from a golden ratio one. So how do you choose when to use one over the other? Well, it all boils down to the type of project. I recently discovered this article by Elliot Dahl on web typography. You can find the link in the lesson notes. In the article Elliot categorizes websites in three archetypes, marketing, blog info and product. Now, each one of these has a different purpose and will work best with the different type of scale. Let's start with the marketing websites. These are used for presenting a product or service and telling the story behind it. Their goal is to convert visitors into customers. So the font sizes will be picked using more, let's say artistic criteria. With marketing websites you will find very big differences in font sizes. You will see normal regular looking body text alongside large headings. That means that on marketing websites it's best you use or scales with larger ratios. Something like an augmented forth or even a golden ratio. Usually a ratio of about 1.4 is a good place to start. For example, Avocode uses a pretty aggressive type scale. Notice the difference between the different headings and also the body text. Another example is the website of Chris Ducker. He uses large headings to walk you through the various sections of the website, and also draw attention to the most important ones. The second category is Blog or Info websites. So these focus heavily on text content. So readability is much more important. Therefore it's best to use a medium ratio to avoid that high contrast between sizes. In practice go for the middle tier scales with the ratios around 1.3. The perfect forth is actually a good example and a very good place to start. A good example here is medium, it doesn't go crazy with the font sizes, they all progress very nicely. And because of that the larger headings don't get in the way of the contents or make the page really big. The third archetype is the Product sites. Think about the web present back end or any other admin interface. Their goal is to solve problems and provide access to various tools. These types of websites will use the more sensible scales with the one with lower ratios. The more linear ones they don't need that big contrast between font sizes because they don't need to emphasize anything. Their goal is to create a hierarchy around the content. So for these types of websites go with the low ratios, around 1.2, that's a good place to start. The are major second scale which is 1.25 is pretty good scale to use. So there you have it three archetypes you can use to categories your project and based on that choose an appropriate type scale. Now, I want you to take this for the grain of salt because these are simply guidelines, they're not rules that you absolutely have to follow, okay? In the end, you have to do what looks best to you, and sometimes that might take you in a totally different direction, and that's totally fine. As I said, simply guidelines, use them to guide you through this process. Now, let's say that you chose a scale and you've also implemented that scale, how do you make it responsive? Well, we'll try and answer that in the next lesson.