Typographic Scales

What is Typography Scale?

The typographic scale is used to create a balanced and friendly font sizing, which uses a range of type sizes related to each other since they grow by the same ratio. Using this method will help us develop a type system that is scalable and adaptive.

Type of Scales

Selecting a scale depends on specific needs, and sometimes this can be tricky. Always choose a scale based on the type ratio that we need for our designs. However, we can always develop our system once we fully understand how type scale works.

High Contrast Scales

Designs that demand a fair amount of contrast between types can use high contrast and hugely benefit from Augmented Fourth, Perfect Fifth, and Golden Ratio. These can be a perfect fit for large screen devices.

Medium Contrast Scales

Medium contrast can use The Major Third, Major Second, or Perfect Fourth scales as the contrast between types is not drastic and can fit more content.

Low Contrast Scales

Designs that should be versatile, such as dashboards and mobile apps, often use low-contrast scales as they allow the content to be flexible. Low contrast scales include Minor Second and Major Second.

Responsive Type Scales

Type scale that is responsive and feels more comfortable to read across multiple screen sizes is essential. Developing a responsive type scale can be tricky. We can either bring in a second ratio or have multiple type scales for different screen sizes.

Adding a Second Type Scale

This can be any ratio we want. Adding a second type scale allows us to have more flexibility, making our type scale a little looser to allow well-defined type sizes for much higher contrast across different screen sizes.

Multiple Type Scales

We will use a small ratio as there is less distraction in smaller screen sizes, and as the size increases, we can increase the ratio to bring more contrast to the type to avoid distractions to the user.

Recommended Reading

I recommend reading this article on Typographic Scale by Spencer Mortensen.

Type Scale Calculator

This is a visual type calculator that helps you pick the right type scale ratio for your design.

Creating a Typographic Scale

Usign the Golden Ratio Number to improve contrast and readability of our typography

1. Select the Body Copy text layer and navigate to its text options. Multiply the Line Height with the Golden Ratio number 1.618
2. Now, select the Heading text layer and multiple the Font Size with the Golden ratio number and change the font weight to Bold from Regular
3. Copy the Text Property of the Body Copy and paste it to the Main Copy Layer. Also copy the Heading Text Property and paste it to the Section Heading Layer.

Creating a custom typographic scale

1. Create a Frame and Add "6" Text layers five for Headings and one for body copy with a common font size (15px).
2. Select the Body Copy and Multiply the Line Height with 1.5 or choose your own common multiplier.
3. Now select the Heading 5 text layer and multiple the font size with the common multiplier which is 1.5 in this case.
4. Copy the heading 5 text property and apply it to heading 4. Multiply it with 1.5.
5. Repeat the same for the rest of the text layers and you'll get a perfect typographic scale with a good contrast.
6. Now for the final step, change the font weight of Heading 1 and 2 to Bold from Medium, and the Heading 3 to Semi-Bold.

Conclusion

The typographic scale helps us in building a type system that is scalable and responsive. This method also helps a lot when it comes to having a good contract and balancing our typography.