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.

• 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

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.

2. Typeface/ Font: It is the visual style of letters and characters. The choice depends on the spacing, theme, and overall design.

3. Size: Font size determines how large or small text appears in a design. Choose a size that is readable and fits the frame and purpose of the text.

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

4. Colour: Gives a design its visual appearance and helps create contrast and readability. Figma supports colour formats such as HEX, RGB, and CSS.

5. Stroke: Adds an outline to text or other design elements. It can be solid or dashed and can be customized by adjusting its colour, thickness, alignment, and dash style.

6. Effects: Add visual enhancements to text and other design elements, making them more visually appealing. Figma provides several built-in effects, and more can be added using the + button.

7. Text Styles: Allow designers to save and reuse typography properties across a design. They help maintain consistent typography for headings, body text, and other text elements.

8. Outline Stroke: Converts text or vector strokes into editable vector paths, giving you more control over their shapes and styling.