UI Design
What Is a Type Scale?
A type scale (or a type scale) is a selection of pre-picked font sizes designers use to represent different text elements in digital products to establish balance and harmony.
This article will explain why you need a type scale and how to pick the right one for your next project, so keep reading!
How to create a good type scale for your project
Can you remember occasions when you landed on a digital product, such as a website or an app, and found yourself lost and confused, trying to navigate chaotic text chunks and reach an objective while holding on for dear life? In these modern ages, designing digital products without a set visual and textual hierarchy isn’t a way to go. Type scales serve designers to bring uniformity and order into the design while allowing users to digest the written content more naturally and achieve their goals without issues.
As a product designer, your next project will likely be a website, web app, or similar. When designing such a product, you’ll have to determine the suitable typeface and font size at some point. How do you select the appropriate font size to implement your design and improve usability?
The correct answer is: by using a type scale.
Type scale is a selection of font sizes you’ll define by choosing a base font size and a ratio (or scale.) You can use the Golden ratio (1.62) or the musical interval, the Minor third (1.2.)
You’ll get your next font size by multiplying the base font size with the ratio. Next, you’ll multiply this new font size with the current ratio to get another font size. You’ll repeat this process until you get the full type scale you need for your project.
There are a few ways to get these font sizes: manually or with the help of online tools, such as Typescale.com, Material Type Scale, or Typescale.io, which you can integrate into your Figma or Adobe XD. Most of these tools are straightforward and offer a selection of Google fonts, base font sizes, weights, and a preview text box, where you can enter your desired text and see how it would look in different sizes. We express these sizes in pixels (px), em, or rem.
What are em & rem on a type scale?
Pixels are absolute units relative to the DPI and represent the resolution of the viewing device. Because they are fixed, they can, for particular project types, become problematic. For example, when designing responsive websites and web apps.
Em and rem are scalable units in CSS that define values of properties.
If your goal is to create a responsive design, then em and rem could serve you better than pixels because they they react to width and height of a browser.
Em and rem are relative units: em is relative to the parent element, and rem is relative to the root element of the HTML tag. What are their difference and their connection to the type scale?
Em and rem are different regarding their inheritance. As we already mentioned, REM bases itself on the root element from HTML, which means every element expressed through REM will use the HTML root size as its calculation point. 1rem is always identical to the font size you defined in the HTML. Therefore, creating a type scale based on rem will help you create a harmonius scale.
On the other hand, em bases itself on the parent element’s font size. If you have a parent element with a different size than the root element, you’ll calculate the em considering the parent element instead of the root element. That’s why some parts sized in ems can turn out in sizes you didn’t expect or foresee.
Even though using em gives you control in determining the size of a particular page area, we highly suggest using rem whenever possible based on our experience working with responsive typography.
Use of type scale in UI
Creating a type scale for UI purposes is both art and science.
It’s also sometimes a daunting task, and you might get overwhelmed or confused as a designer. But, you can use some pre-typographic scales to achieve seamless UI, especially on websites.
For example, the Major Second, Major Third, or the Perfect Fourth are great starting points since the size differences between h1 and h5 will be moderate. You can also use Perfect Fifth or the before-mentioned Golden Ratio to create heavy and bold headlines. These ratios offer more visual separation between the largest and the smallest step-down.
Once you select your preferred type scale, it’s time to add it to your project. We suggest visualizing and testing different scales to see how they will integrate into your design. When selecting a proper scale for a mobile app, you can make your life easier and refer to Apple and Google guidelines. Apple created recommendations for their default typefaces – San Francisco and New York.
For example, Human Interface Guidelines suggest using 17pt as a base body text size. You can also find other advice on how to apply dynamic type sizes from iOS. Material Design resources by Google has an interactive tool you can use to select a Google font and automatically create a type scale for it. Their suggestion for Roboto is to use 16 or 14pt for the body text size.
Types of contrast in type scales
As we briefly mentioned before, there are different ratios you can use to achieve different levels of contrast in your type scale. So, let’s see how and when to apply which ratio.
If your task is to create a design for a bigger screen, you’ll want to select ratios that will give you that dash of drama you’re searching for between the h1 and h5. Ratios that will provide you with high contrast are the Augmented Fourth (1.414,) the Perfect Fifth (1.500,) and the Golden Ratio (1.618.)
For a type scale with medium contrast, you’ll use the Minor Third (1.200,) the Major Third (1.250,) and the Perfect Fourth (1.333.) These scales are the safest option because they fit the majority of screens, and you can use them for designs with much text.
Finally, if you need to opt for a lower contrast type scale, you can refer to the Minor Second (1.067) or the Major Second (1.125.) These scales are best for minor type elements, usually used as identifiers.
Designers use lower contrast scales, usually for dashboard apps, mobile apps,or e-commerce listings.
Summary
There you have it – our brief but concise guide on type scales!
We hope we resolved some possible confusion and provided quality starting steps for your following projects.
From experience, type scales can also, at times, be too limiting. Feel free to skip some sizes you might not need or adjust them to your project better. But type scales are an amazing starting point until you get the hang of defining font sizes for your type system.
We highly suggest checking out our ultimate UI Typography Masterclass to improve your typography skill. This masterclass contains practical video lessons, checklists, and engaging exercises to hone your knowledge and skyrocket your confidence.
Join the waitlist and make your next UI project feel like a walk through the park.
For more questions, feel free to reach out via our contact form or follow us on Instagram. We’d be happy to help with whatever questions you have.
Happy designing! 🤗
The Ultimate UI Typography Masterclass
Master the most fundamental UI design skill and elevate your designs forever
Make your designs from average to stunning by enrolling in this engaging, practical, and all-inclusive video course. It’s time to learn all the secrets, feel confident in your design decisions, and become the design professional you always wanted to be!
