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
Font sizes
| Project platform | Name | 💻 Desktop | 📱 Mobile | Info |
|---|---|---|---|---|
Desktop | H1 | 56 | 34 | Always bigger than H2 - can be up to 96px |
Desktop | H2 | 46 | 28 | Always bigger than H3 |
Desktop | H3 | 38 | 20 | Always bigger than H4 |
Desktop | Body 1 | 14 | 16 | Can be up to 16px |
Desktop | Caption | 12 | 12 | 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
Font family
| Term | Definition | Font Example |
|---|---|---|
serif | Fonts that have serifs (the flourishes and other small details you see at the ends of the strokes in some typefaces) | Times New Roman |
sans-serif | Fonts that don't have serifs. | Helvetica |
monospace | Fonts where every character has the same width, typically used in code listings. | Courier New |
cursive | Fonts that are intended to emulate handwriting, with flowing, connected strokes. | DO NOT USE THEM |
fantasy | 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).
Best practices
- 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
Next up
Color palette