🔤

Text styles

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 platformName💻 Desktop📱 MobileInfo
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

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).
image

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

Dive Deeper