Typography(Texts and fonts) in Figma

The word typography is constituted from the two words typo, indicating the typed object, and graph, meaning the design-oriented with it. So, whenever there is a mention of typography in Figma, it indicates the text presented with the design.

Importance of Typography

• It forms a crucial part of any design and sometimes transforms itself into a vibrant design.
• It forms the step to grab the attention span of the user and creating a wordy mnemonic.
• Through good typographic styling, a hierarchy is set up.
• It helps to add value to the tone and meaning of the design.

Important Terms Related to Typography and How to Apply Them?

1. Text:

This is the word a user picks up for display purposes. For instance, if someone is designing something for a confectionery, his intended text could be donuts, cakes, happiness, sweetness, first bakery, city’s only.

Use the Text tool or by copy-pasting the intended text in Figma Interface.

Figma UI showing Text tool, Text box, and Text element

2. Typeface/ Font:

The typeface could be understood as way the letters of the words are arranged. It could be curvy at the edges or might be bulgy.

The basic factors on which it is dependent are the space, theme, and overall look of the design. There are some universal typefaces that someone could use who has just begun their design pursuit which are Serif Fonts (Times New Roman), Sans Serif Fonts (Aerial), Script Fonts (Snell Roundhand), Monospace Fonts (Courier), and Display/Decorative Fonts (Clearview).

Apart from the above stated, there are tons of typefaces in Figma, which could be selected by text >> Fonts >> Font you want.

Figma UI showing Font bar and font applied to text

3. Size:

This tells how large/ small the text would be when seen on the intended frame (background) and it should always be kept in mind that at 100% resolution no strain should be felt by viewer and depends upon whether you are using the text as the only element, part of UI, or with an object and also should align with frame. For instance, if the frame is 500 x 500 px and text is only design element present, then it should be within 64 – 96 font size.

Now, to size/resize text, select the text, hover over the text panel and choose the size of text.

Other parameters that could be altered with the size are line height, letter spacing, paragraph spacing, and alignment.

Note: The size of the text box is different from the font size

Figma UI showing different size options

4. Colour:

One of the crucial elements of any design is the color, and it gives the design a look of shades and the selection should be such that it gives a good contrast on the screen and is viewable easily. Contrast is the key to a good and soothing color.

There are a lot of color schemes such as Hex (Commonly used), RGB, CSS, etc. present in Figma, other color schemes could be brought in with the help of plugins.

To choose the color for the text, select the text and choose the suitable color from the Fill panel by hovering the mouse on the panel.

Other options to alter with color are its direction of flow, addition of gradient, opacity, blend.

Figma UI showing different color tools

5. Stroke:

The Stroke feature allows to add emphasis to the typography and it could be either solid or dashed or even custom (giving option for choosing the number of dashed lines). Miter gives the option of creating sharp edges.

Stroke could be customized with various options such as dash, angle, color, thickness, and alignment.

Now, to add a stroke to the topography, select the text, hover to the lower right side of the screen, and select the stroke.

Figma UI showing Stroke Features

6. Effects:

The effects add additional effects to the typography, making it more even more visually appealing

There are four basic options available with it and others could be added by using the + button.

To apply the effect to the text, select the text, then hover to the lower right side corner, and click on effects. Select the effects from the drop-down menu.

Figma UI showing Effects options

7. Outline Stroke:

The unique feature of Figma that allows to vectorize the typography is Outline Stroke and gives more freedom to style the typography, increasing the reach and at the same time, saving the time and effort spent on styling individual letters of the word if the user intends to do so.

To apply the outline stroke, select the text, right-click on it, and select outline stroke, or enter the Ctrl + Shift + O.

Final Design

Conclusion

To conclude, it could be said that typography is a crucial element of designing which empowers the words to show the feeling of the design, adding to the creativity and completing the crucial step of prototyping, designing, and UI creation for devices such as mobile phones, desktops, etc.