1.1 Typography

In the Figmaster - Lessons Figma file, open the 1.1 Typography page.

Introduction

In this chapter, we will cover the typography and text styles for our design system. You will learn how to create simple and consistent text styles. We'll create text elements and then convert them to the text styles using the Typestyles plugin.

Inter

For this project, we will use Inter font family. Inter is a beautiful typeface carefully crafted and designed for computer screens. It's a free and open-source font family, and you are free to use this font in almost any way imaginable. It's also a part of the Google fonts, so you can use it right away in Figma without installing anything.

Fun fact: Inter font family was designed by Rasmus Andersson - a UI designer who worked at Figma. By the way, Figma is also using Inter as its UI font.

If you prefer to use a different font, don't worry. You will be able to change it in a few clicks in the 4th Module. Now, please proceed with Inter.

Inter Dynamic Metrics

There is, of course, no absolute right or wrong when it comes to expressing yourself with typography, but Inter Dynamic Metrics provides guidelines for how to use Inter best. You can visit this website to check the recommended letter spacing values for Inter. You will find the Ideal values table in the bottom-right corner where, for example, 16 px has the ideal value set to -0.011. It means that in Figma, you will need to set the letter spacing to -1.1% for the font size equal to 16px. That way, your text styles will have the most optimal letter spacing for their size. Don't worry, though. I will give you the correct % values for the text styles we'll create in this chapter.

Spacing

In this system, we will use incrementally measured spacing to create harmonious arrangements of components and text. It gives the elements a predictable rhythm, which makes the experience feel intentional and well designed. The spacing for components and typography will be done in increments of 4 pixels. It forms the basic unit of measurement for our spacing. You will learn more about spacing in the 3rd chapter of this Module.

Plugins used in this chapter

Typestyles

Step 1. Body text - layers

Part 1. Text S

OK, it's time to create our first text elements. Text S style will be used for small texts and captions, for example, helper texts under the inputs.

  1. Press T on your keyboard to open the text tool.
  2. Click somewhere in Step 1 & 2 frame and enter a placeholder text. You can use this phrase if you want: Almost before we knew it, we had left the ground.
  3. To stop editing the text, click somewhere on the canvas.
  4. In the Text panel on the right, set the font family to Inter, font size to 12 px, weight to Regular, and the line-height to 16 px.
  5. Notice that in the Inter Dynamic Metrics, the perfect value for 12 px is set to 0. It means that we don't need to change anything in the letter spacing. It should stay at 0%.
  6. Click on the text item, and while pressing ALT + SHIFT move, it 20px to the bottom.
  7. Change the font weight to Medium for the new item.

Part 2. Text M

You're doing great! Text M will be our base font size, and we will be using it for most of the components.

  1. Select both 12 px text elements from the previous part.
  2. Press and hold ALT + SHIFT to move them 40px to the bottom.
  3. In the Text panel on the right, set the font size to 14 px and the line-height to 20 px for the new items.
  4. In the Inter Dynamic Metrics, the perfect value for 14 px font size shows -0.006. It means that we need to change the letter spacing for both text elements to -0.6%.

Part 3. Text L

Let's create the next text elements. We will use Text L for big buttons and descriptions.

  1. Select both 14 px text elements from the previous part.
  2. Press and hold ALT + SHIFT to move them 40px to the bottom.
  3. In the Text panel on the right, set the font size to 16 px and the line-height to 24 px for the new items.
  4. In the Inter Dynamic Metrics, the perfect value for 16 px font size shows -0.011. It means that we need to change the letter spacing for both text elements to -1.1%.

Step 2. Creating text styles - body text

We'll convert the text layers we've just created to text styles with the Typestyles plugin in this step. Obviously, we could've done it the traditional way, but I want to show you a more convenient method where there are more text styles.

Important! Since Figma allows for only one plugin to be open at a time, the Figmaster plugin will close when you open the Typestyles plugin. Don't worry, though. You will find the instructions for this step in Figma too.

  1. Select two text layers that have the font size set to 12 px.
  2. Press CTRL + / on your keyboard to run the search.
  3. Type in 'Typestyles' and press Enter to launch the plugin.
  4. In the Typestyles plugin window:
  5. Click on + Custom (Text) in the right sidebar.
  6. A blue tag will appear in the top-left corner with a 'Text' inside. Change the 'Text' to 'Text S' by typing it in the tag.
  7. Click on + Font Weight (%fw) in the right sidebar.
  8. Press the Make Typestyles button.
  9. Click somewhere on the canvas to deselect the text elements. In the right panel under Text Styles - Text S styles have appeared.
  10. Repeat the process for the rest of the text layers:
  11. 14 px elements should be Text M / Regular and Text M / Medium.
  12. 16 px elements should be Text L / Regular and Text L / Medium.

Step 3. Headings - layers

You're doing great! Now, let's create headings.

Heading S

  1. Press T on your keyboard to open the text tool.
  2. Click somewhere in Step 3 & 4 frame and enter a placeholder text. You can use this phrase if you want: Almost before we knew it, we had left the ground.
  3. To stop editing the text, click somewhere on the canvas. Notice: If you see Text L/Medium in the text panel, hover on the name and press the unlink icon.
  4. In the Text panel on the right, set the font family to Inter,  font size to 20 px, and the line-height to 28 px.
  5. Change the font weight to Medium.
  6. In the Inter Dynamic Metrics, the perfect value for 20 px font size shows -0.017. It means that we need to change the letter spacing for the text element to -1.7%.

Heading M

  1. Select the text element from the previous step.
  2. Press and hold ALT + SHIFT to move it 40px to the bottom.
  3. In the Text panel on the right, set the font size to 28 px and the line-height to 36 px for the new items.
  4. In the Inter Dynamic Metrics, the perfect value for 28 px font size shows -0.021. It means that we need to change the letter spacing for the text element to -2.1%.

Heading L

  1. Select the text element from the previous step.
  2. Press and hold ALT + SHIFT to move it 40px to the bottom.
  3. In the Text panel on the right, set the font size to 36 px and the line-height to 44 px for the new items.
  4. In the Inter Dynamic Metrics, the perfect value for 36 px font size shows -0.022. It means that we need to change the letter spacing for the text element to -2.2%.

Step 4. Creating text styles - headings

OK, it's time to convert our text elements into text styles.

  1. Select the heading text element that has the font size set to 20 px.
  2. In the Text panel on the right, click on the Style Icon (four dots).
  3. In the Text styles menu, click on the + icon.
  4. Name the style to Heading/S.
  5. Repeat the process for the last two text layers where:
  6. Text element with the font size set to 28 px will be Heading/M.
  7. Text element with the font size set to 36 px will be Heading/L.

Summary

Great job! We've just created all the necessary text styles for our design system. As you can see, you don't need to have hundreds of test styles for a simple design system. What is more, having them set up, you'll be able to create lighter and more consistent UIs and components.

PreviousNext