Design

The Type Scale On a Design System


Reading Time: 4 minutes

Learn about one of the Design System’s principles: how a good Type Scale helps us to have a great User Interface (UI) and User Experience (UX).

 

Let’s talk a bit about Typography in a Design System

Typography is not just about fonts, styles, size, margins, space, scale, and color. Therefore, typography organizes information in an objective way and determines how this information is presented to the user.

Size, color, fonts, and all typography’s features are tools which help us to represent information in an accurate way. So, we have to work with these tools like a whole —each one having an effect over the other: if one of them changes the perception of the whole, UI and UX Design changes too.

Good use of typography helps us create clear and functional design and content. Click To Tweet

Good use of typography helps us create clear and functional design and content.

The Type Scale on a Design System needs to have a series of styles that work out together and help create a hierarchy of the design elements in our projects.

The hierarchy on each element when working with Type Scale is defined by different styles of typography. Click To Tweet

Here is an example of a Type Scale that shows its application with titles, subtitles, body text, buttons, and quotes. The hierarchy on each element is defined by different styles of typography.

Roboto Type Scale

Implementation of Type Scale

That scale has to be applied to the general layout of a project and its components. Therefore, font, size, weight, and kerning determines how every element on a Type Scale are connected.

Type Scale has to be applied to the general layout of a project and its components. Click To Tweet

  1. Categories
  2. Category values
  3. Categories applied

Titles

Titles are the most important texts on a Design System. Consequently, they have a hierarchy range from 1 to 6. They can also use font typefaces with more expressive details that help to capture user attention.

Titles are the most important texts on a Design System. Click To Tweet

For example, look at the typeface used for H2 contrasts with the one used in the body text: that contrast captures immediately the attention of the user.

A little tip: Serif or Sans-serif typefaces are great to use on smaller titles.

Subtitles

Subtitles are reserved for texts of medium importance inside the content. Generally, they are short in length.

Body Text

Body text is used in lengthy paragraphs. This type of text is small and typically comes in ranges 1 – 2.

The correct use of a Type Scale on a Design System helps us create a great user experience and gives visual coherence to our projects. Click To Tweet

Caption and overline

These elements use the smallest font sizes of the Type Scale in a Design System. As a result, they are used to introduce a headline, or for captions.

Button

A button text is a Call To Action used by different components like tabs, dialogues, and cards

Typically, they go all in CAPS and sans-serif typefaces.

To sum up, the correct use of a Type Scale on a Design System helps us create a great user experience and gives visual coherence to our projects.

Become a Typography Nerd! The more you know about this topic the better! Click To Tweet

If you want to dig deep on Type Scale, learn as much as you can about typography, typefaces, fonts, styles, formats, rhythm…become a Typography Nerd! The more you know about this topic the better. Then, you can make the best decisions when you have to choose a typeface for your projects in terms of function and meaning on a Design System. 😉

Tips
A Basic Guide to UX Competitor Analysis
UI/UX Design
User Interface Trends in E-commerce
Agile
What Is a Product Design Sprint and How-To Develop It
Copy link
Powered by Social Snap