🔤

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

Font family

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