Typography(Texts and fonts) in Figma
Last Updated : 14 May, 2024
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 element2. 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 text3. 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 options4. 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 tools5. 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 Features6. 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 options7. 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 DesignConclusion
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.
Similar Reads
Tachyons Typography Font Families Font families in Tachyons are the font-family property that specifies an element's font. It can have multiple fonts as a backup system i.e. if the browser does not support one font then the other can be used. Used Classes: sans-serif: This class is used to provide sans-serif style to the font.serif:
2 min read
Tachyons Typography Garamond Tachyons is a free and open-source that is used to create a responsive website. In this article, we will see how to use the Garamond font family with the Tachyons toolkit. Garamond is the name of the font typeface that can be applied to elements in the website. Tachyons Typography Garamond Class: ga
2 min read
React MUI Typography Display React MUI is a UI library that provides fully-loaded components, bringing our own design system to our production-ready components. MUI is a user interface library that provides predefined and customizable React components for faster and easy web development, these Material-UI components are based o
4 min read
Text Formatting Features in Figma Formatting in Figma means looking at a design, the different pixels of margin or padding applied to the containers, the look of the text, font weight, font size, and all other properties that fall under the domain of making the format of the design eye appealing & beautiful. In this article, we
6 min read
How to Add Images in Figma? In the world of design, images play a pivotal role in conveying messages, showing emotions, and enhancing User Experiences. Figma, a powerful design tool, offers numerous features for seamlessly incorporating images into your projects. In this guide, we'll explore what images are, their types, how t
3 min read