7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 6Length: 18 minutes

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.5 Automation Tools

A type scale can be easily created by using what you’ve learned so far in this course, but there are certain tools that will make the process a lot easier. In this final lesson, we’ll go through a few of them.

Related Links

2.5 Automation Tools

A Type Scale can be easily created by using what you've learned so far in this course, but there are a few tools which will make this go a lot easier. So let's go through a few of them. The first tool is Type Scale. You can find it at typescale.com. Essentially, you can input your base font size, you can select your scale, or you can input your own scale. And then you get a preview of that type scale on the right. You can also see a more in-depth preview with a lot more text here. And at the end it can also grab a CSS and paste it directly in your project. Really cool, really handy. It can also set different fonts from Google and that allows you to preview fonts as well, but part of this course we are interested in the actual Type Scale functionality. Another tool we can use is called Archetype. Here you also get a preview of the scale you choose from the left side here. First, you can go ahead and pick your fonts. Once you've done that, you can define your sizes. Choose the base font size here, and also, define your scale ratio. There are no presets here, unfortunately, but you can experiment with different ratios, and get a real-time preview of what that scale will look like. And you can also adjust the spacing here. Once your all set, you can see a preview, you can download the fonts if you want. And you can also export to Sketch and to CSS, which is really, really cool. If you sign in with Google, you can also save these settings as projects. The third tool I want to show you is called Modular Scale. It works pretty much the same way as the other two. You set your base font size in EMs or in pixels, you choose the ratio. You also have a few pre-defined ratios here, and then you can see a preview here on the right side, going from one And above. And you can see, there are a lot of items to be previewed, or it can go the other way. And give the lower values as well. One thing that I really like about this is you can switch from table to text. So, this is text and table gives you just the values you need. And something else I really like, let's say you change your base font size from 1 To, for example 2 EMs. While this will give you the calculations for 2 EMs, but also the calculations for 1. So you can see exactly what the differences are between changing the base font size, really, really cool. You can export this as SAS or JavaScript via plugins. And finally the fourth tool I wanna show you is called Grid Lover. Here you get a more detailed preview also with a baseline grid. You can select your scale factor from here. The line height, the font size, and you get a real time preview of the CSS as well. It also works in the SCS's version, and you can also choose the unit from pixel, REM, and. A really cool tool, really easy to use and definitely very handy. And there you have it, four tools you can use to easily generate typographic scales. Now before we wrap things up, there is one more thing I like to talk about, and that is the line height. When we were creating these type scales, we just focused on the font sizes, but the line height is also important. And you must choose an appropriate line height depending on the font size, okay? The line height is basically a multiplier, so when the font size changes the line height changes as well. So make sure when you change the Type Scale or when you change the base font size you also use an appropriate line height. Some of the tools I showed you can directly give you CSS code that includes line-height declarations. But if you're creating the scale manually, don't forget to write those yourself. And, remember, the smaller the font size, the bigger the line-height. For headings, I usually go for 1.2 while for body text, I go for 1.4 or even 1.5. It also depends on the font family. So that concludes this short course on typographic scales. I hope you enjoyed it. Thank you very much for watching, and until next time, take care.

Back to the top