Texts are the most basic functionally of Figma, yet the most important to handle properly.
In this page, you'll discover both some practical recommendations and best practices in order for you to get most of this fundamental elements of your designs.
1. Create and edit text styles
|Project platform||Name||💻 Desktop||📱 Mobile||Info|
Always bigger than H2 - can be up to 96px
Always bigger than H3
Always bigger than H4
Can be up to 16px
Never go below 12px in font size
2. Define your font families
For choosing your font families used on your next project,I recommend you to use Google Fonts and choosing simple and elegant fonts that best reflects your style at fonts.google.com
Fonts that have serifs (the flourishes and other small details you see at the ends of the strokes in some typefaces)
Times New Roman
Fonts that don't have serifs.
Fonts where every character has the same width, typically used in code listings.
Fonts that are intended to emulate handwriting, with flowing, connected strokes.
DO NOT USE THEM
Fonts that are intended to be decorative.
DO NOT USE THEM
3. Organize your font book collections
Open your Font book app
- Start creating your first collections.
- Everytime you download a new font, make sure to add it to its dedicated collection(s).
- Never use more than 3 different font families (Recommended number = 2)
- Always prefer font clarity over font style
- Never use the "Justify" text option
- Keep a line height of 120-140% until you know how to fine-tune that number properly
- Never display a paragraph larger than
- Do not touch letter spacing until you know how to fine-tune that number properly
- Keep the text layout clean and uncluttered and use enough white space around