Demystifying Type scale

In this article I want to talk about how we could start off defining the type scale as we embark on designing a Website.

It can be quite daunting to arrive at a specific set of sizes for different elements for your websites. What size should the H1, H2, body etc be? Do I eyeball it or is there a science to it? More often than not eyeballing seems to be the choice for a lot of novice designers.

Fundamentally at it’s core a type-scale is a relationship across different type elements such as the headings, body text, captions, CTAs etc. within your website. One way to approach establishing this is to start with defining what is the body font size would be and then deriving the size of the other elements such as Sub-Headings, Headings etc. as a multiple of the former. Most websites use 16px or 18px as their body font size and derive their type-scale off that. There are several popular ratios that are available to experiment with and you could either adopt one of those or chose to use your own depending on what works for your visual rhythm.

The below table would attempt to illustrate how you go about calculating the size in relation to the base/body font and using a Minor Thirds ratio that has a multiplication factor of 1.2.

One thing to keep in mind as you populate the sizes for the Typographic elements are the levels and prominence of visual hierarchy that you would need within the page.

I found this site particularly interesting for the way it represents how the ratios influence the type scale and how that in-turn affects the visual rhythm of the page .