How to create a type scale
Last updated
Last updated
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.
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.
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
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.
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. ****
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.
Once the typeface is changed, you can add or remove sizes based on the information density of the product.
There are several scales to choose from, such as Major Third (1.250), Perfect Fourth (1.333), Golden Ratio (1.618), and more.
Material design and Human Interface Design type scales using the modular ratio.
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.
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.
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.
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.
Use a heavier font for buttons to create better contrast and hierarchy
Captions are one of the smallest sizes on the scale, but avoid going below 12 pts. To improve readability, use uppercase.
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.
Once you have customised the type scale for your product, you are ready to publish and use the scale.
Here are a few links if you’d like to delve deeper into creating type scales.
This tool can help you have a visual representation of a typographic scale for web design—
If you want to learn more about using a modular scale for typography design, here is an article emphasizing proportional relationships for enhanced visual harmony —
For a detailed guideline on selecting a type scale for a project, read this article on responsive type scales —
This article can be helpful for you if you are looking for a practical guide for designing modular scale typography for interfaces—
You might need to add more styles to the scale for more information-dense products like Zerodha, Dream11, , etc. and remove styles from the scale for less information-dense products like Medium, Instagram, etc.
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. is a great online resource to experiment with modular ratios.
Inside , 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 section.
