2️⃣How to create a type scale

👋 Introduction

A well-defined type scale provides consistency, hierarchy and contrast in your product. It makes it easier for users to consume content and faster for developers to code. Follow this guide for practical tips for selecting a typeface, adding or removing sizes, and tweaking text styles to optimize readability and hierarchy.

1️⃣ Creating a test bench of screens

If you already have a product, creating a test bench of screens is a good starting point.

The test bench is a collection of screens that represent a good variety of text styles used in a product. We use these screens to test different fonts and sizes. This helps us understand the range of typographic styles we need to consider when creating a type scale.

2️⃣ Start with a type scale

If you are starting from scratch, the Material design type scale is a great starting point for Android, web and multi-platform. If you’re only building for iOS, you could use the type scale from Human Interface Design guidelines.

Material design type scale and Human Interface Design type scale

3️⃣ Changing typeface

Picking and optimising a typeface for performance can take a fair amount of effort. You can go one of two ways depending on the stage of the product, as follows.

Use native typefaces if…

You’re in the 0-1 phase of building a product and are focussing on product-market fit.

You can start with the system's native typeface such as Roboto for Android, and SFPro for iOS. They have language support, refined for legibility, and support accessibility specs. It will make engineering significantly easy and help you focus your energy on getting the product right. ****

Pick your own typeface if…

You’re ready to spend time building a consistent brand across platforms.

A custom typeface can reflect a brand’s unique personality, values and help connect to the target audience.

4️⃣ Add or remove sizes

Once the typeface is changed, you can add or remove sizes based on the information density of the product.

You might need to add more styles to the scale for more information-dense products like Zerodha, Dream11, Booking.com, etc. and remove styles from the scale for less information-dense products like Medium, Instagram, etc.

Expand your type scale by using a modular ratio

Once you have your base type scale, using a modular ratio is a useful technique to expand it. The ratio, along with the base value, can be used to generate the larger or smaller sizes in the scale. Generally, body text type size (typically 16px) is a good base value. Typescale.com is a great online resource to experiment with modular ratios.

There are several scales to choose from, such as Major Third (1.250), Perfect Fourth (1.333), Golden Ratio (1.618), and more.

Inside typescale.com, we can recreate the base scale that we currently have. Material design type scale uses the Major Second(1.125) ratio and Human Interface Design type scale uses Minor Second(1.067) ratio. You can learn more about modular ratios in the further reading section.

Material design and Human Interface Design type scales using the modular ratio.

Once we generate a scale, we can round off the values to the nearest whole number to get the final scale.

Once we have the type scale in hand, we can add or remove sizes based on our product requirements.

If more values are required or the default sizes don’t meet the product requirement, add more values using the appropriate scale.

5️⃣ Tweak Displays

When tweaking display fonts, using a lightweight typeface can make the layout subtle, refined and free of excessive visual clutter. Using a lightweight typeface can be a stylistic choice rather than a guideline to follow.

6️⃣ Tweak Titles

To achieve a more refined heading style, you can make the headings lighter. Similarly, for a bolder style, you can make the headings heavier. These are some of the stylistic choices you can make based on the product.

For longer titles, a condensed typeface or tighter tracking can be used. Additionally, the line height of headings can be reduced for a more compact look.

Adjusting the tracking can improve the readability of text. Use a tighter tracking value to improve legibility for larger text sizes like headings.

7️⃣ Tweak Body Font

Some typefaces have a small x-height or have a large difference between cap height and x-height. For such typefaces, use a larger font size to improve the readability of the text.

Some typefaces have a large x-height or have a small difference between cap height and x-height. For such typefaces, use a smaller font size to improve the readability of the text.

Cap height is the height of the uppercase characters in a typeface measured from the baseline to the top of flat characters. The X-height is the height of lowercase characters which is measured from the baseline to the top of lowercase characters that have no ascender or overshoot.

Depending on the density of the typeface, it may be necessary to increase the line height. A line height of 110% to 140% is a good starting point.

For smaller text sizes like body text, use a loose tracking value to improve readability.

8️⃣ Tweak Labels

Buttons

Use a heavier font for buttons to create better contrast and hierarchy

Captions

Captions are one of the smallest sizes on the scale, but avoid going below 12 pts. To improve readability, use uppercase.

Overline

Overlines should be the smallest size on the scale, but avoid going below 10 pts. To improve readability, increase the tracking of the overline and use uppercase.

For desktop scale, make sure to increase the font sizes for larger resolutions.

9️⃣ Publish

Once you have customised the type scale for your product, you are ready to publish and use the scale.

A type scale can never be considered complete. As the product evolves, the scale must evolve with it. We can always revisit and refine the scale if necessary.