A Guide to Typography in Figma

This article will explain everything you need to know about using typography in Figma.

Typography is the art of arranging letters and text. It makes the copy legible, clear, and visually appealing. Typography is the art of using fonts. It aims to evoke emotions and convey messages. In short, typography brings the text to life. 

Now that we have covered the basics let’s dive in!

To work with typography in Figma, turn on the type tool by pressing “T” on your keyboard. As long as that layer is active, the text options will appear on the right sidebar.

There are a lot of typography settings you can change and play around with. You can change the typeface, font style, and font weight. You can also change the font size and line height. You can control the character and paragraph spacing. You can also control how the layer stretches based on the amount of text you add or remove. Finally, you can set how the layer grows with added text. 

Let’s break it down and go over what each option does.

This option will stretch the text you have selected horizontally unless you hit enter to move it into a new line.

This option keeps the text width consistent. This means new lines appear below the previous ones.

This option fixes the width and height of the textual layer. It’s used chiefly alongside truncation.

You can access this option through the advanced type settings. Truncate lets you shorten text strings from both the beginning and end—by letter or word. Simply select one or more text layers, set your truncation value, and you’re done! For best results, use Truncate on text layers with the same font style.

You can align your text in various ways when working with typography in Figma. You can align text to the left, center, or right and resize it using top, middle, or bottom alignment. We’ll often align the text to the left because it improves readability.

Right-aligning the text is rarely used. You should align the text to the right only when you’re creating lists or cards. The date on these will be right-aligned and constrained to the right edge.

Most of the time, the text’s alignment is set to the top so that each new line appears below the previous one.

Middle alignment might be used when designing header sections and wanting to align text with a visual on the right side. It could also be helpful when you’re uncertain whether there will be one or two lines of text, ensuring both options are aligned.

You can change and play around with a few options in advanced type settings while working with typography in Figma.

The first is decoration options. You can change the option to underline the type there. Underlining is commonly used for links.

The second option in advanced type settings is strikethrough. You might use this option to showcase original prices next to the discounted ones.

You can also find the paragraph indent in the advanced type settings. It can help indicate the beginning of a new paragraph, making the text easier to follow. You can only indent left-aligned text. Keep in mind that indenting paragraphs affects the entire text layer.

Controlling list types and type case options are also available in the advanced type settings.

In the details tab, you will find options for more precise control over letter cases, number styling variations, ligatures, and stylistic sets.

Some typefaces have a variable tab, which allows you to control the typeface’s variable settings while working with typography in Figma.

Text layers function similarly to other layers, allowing you to adjust the text’s position, size, limits, and color. 

Strokes and effects are generally not used for text, especially if you’re a beginner.

Outlining the text is an option to consider if you’re using it as a visual element, particularly when exporting it as an SVG graphic.

Beginner designers might often style the text directly in the textbox using multiple styles when working with typography in Figma. We highly suggest avoiding that. It will make the lives of developers extremely difficult and frustrate you, too, if you ever have to edit parts of that text. Instead, you can use a new text section for every style you use. The only exception would be bolding a word or a phrase within a sentence or a paragraph.

The option to combine typography variables with text styles offers impressive flexibility. You can apply variables to font family, font weight, font size, line height, and set up modes for responsive designs. That provides an effective way to manage the typography in Figma with your designs.

The possibilities are endless, with the foundations to use typography in Figma now at your fingertips. Whether you change typefaces, adjust weights, or fine-tune spacing, you can use text to communicate more effectively. And remember, good typography does more than make your design look nice. It also boosts readability and user experience.

Practice and experimentation help with your Figma design skills. Typography, after all, is an art form that requires a keen eye for detail. So, feel free to experiment with today’s typography tips. Test different combinations of font styles, sizes, and spacing. Find what works best for your design. As you gain experience, you’ll learn to use typography to bring your text to life and make your designs stand out.

We’re thrilled to invite you to join our incredible community of product designers (and enthusiasts) by following us on Instagram. We’re here to support you on your journey to falling in love with product design and advancing your career!

Keep on designing and stay happy! 🥳