Figma Text and Typography

Text is one of the most important elements in any design. How you choose, size, and arrange text directly affects how easy your design is to read and understand. Figma gives you complete control over every aspect of text.

Adding Text to Your Design

Press T to activate the Text tool. You have two ways to add text:

• Click anywhere on the canvas and type. The text box grows as you type.
• Click and drag to draw a fixed-width text box. Text wraps to the next line when it reaches the edge.

After typing, press Escape to exit the text editor and return to the Select tool.

The Typography Hierarchy

Good designs use a clear text hierarchy. Think of it like a newspaper — the headline is biggest, the subheading is medium, and the body text is smallest. This tells readers what to read first.

Typography Scale Diagram

  SIZE      ROLE          EXAMPLE
  ------    ----------    --------------------------------
  48px   =  Display       "Welcome to FoodApp"
  32px   =  Heading       "Today's Specials"
  24px   =  Subheading    "Pasta Section"
  16px   =  Body          "Our pasta is freshly made..."
  12px   =  Caption       "Photo by Chef Marco"
  10px   =  Label         "SOLD OUT"

The Text Panel in Figma

Select any text element. The Design Panel on the right shows all typography settings.

Text Properties Overview

  RIGHT PANEL — TEXT SETTINGS
  +---------------------------------------------+
  | Font Family: [Inter            v]           |
  | Font Weight: [Regular          v]           |
  | Font Size:   [16]  Line Height: [24]        |
  | Letter Spacing: [0]  Paragraph Spacing: [8] |
  +---------------------------------------------+
  | Align: [Left] [Center] [Right] [Justify]    |
  +---------------------------------------------+
  | Decoration: [Underline] [Strikethrough]     |
  +---------------------------------------------+

Font Family and Weight

Figma connects to Google Fonts by default, giving you access to hundreds of free fonts. Type a font name in the Font Family field to search for it.

Font weight controls how thick or thin the letters appear:

• Thin / Light – Delicate, used for large display text
• Regular – Standard reading weight for body text
• Medium / SemiBold – Slightly bolder, used for subheadings
• Bold – Strong emphasis, used for headings
• Black / ExtraBold – Maximum weight, used for hero headlines

Font Size

Font size in Figma is measured in pixels (px). Click the font size field in the Design Panel and type a number, or scroll up and down while hovering over the field.

Common Font Sizes for UI Design

Line Height

Line height controls the space between lines of text. Too little space makes text hard to read. Too much makes it feel disconnected.

Line Height Comparison

  LINE HEIGHT = 1.0 (tight)      LINE HEIGHT = 1.5 (comfortable)
  The quick brown fox             The quick brown fox
  jumps over the lazy             
  dog. The letters feel           jumps over the lazy
  squished together.              
                                  dog. The letters breathe.

A line height of 1.4 to 1.6 times the font size works well for body text. For a 16px font, set line height to 24px (16 × 1.5).

Letter Spacing

Letter spacing (also called tracking) controls the space between characters. Increase it slightly for uppercase labels and buttons to improve readability.

Letter Spacing Examples

  Spacing = 0:     BUTTON LABEL
  Spacing = 1:     B U T T O N  L A B E L
  Spacing = -1:    BUTTONLABEL (too tight)

Text Alignment

Figma offers four alignment options for text:

• Left – Standard alignment for body text in most Western languages.
• Center – Used for headings, buttons, and marketing copy.
• Right – Used for numbers in tables and right-to-left language layouts.
• Justify – Stretches text to fill the full width. Use sparingly — it can create uneven gaps.

Text Resizing Modes

Select a text element and look at the top of the Design Panel for the resizing mode. Figma offers three options:

• Auto Width – The text box grows horizontally as you type. Text never wraps.
• Auto Height – The width is fixed. The text box grows vertically as you type more text.
• Fixed Size – Width and height are fixed. Text that does not fit becomes hidden.

Text Styles

A text style is a saved set of typography settings. You create it once and reuse it across your design. If you change the style, every piece of text using that style updates automatically.

Creating a Text Style

1. Style your text the way you want (font, size, weight, line height).
2. In the Design Panel, click the four-dot grid icon next to the text properties.
3. Click + to create a new text style.
4. Give it a name like Heading/H1 or Body/Regular.

Text Style Library Diagram

  TEXT STYLES PANEL
  +------------------------------+
  | Heading                      |
  |   H1 — Inter Bold 32px       |
  |   H2 — Inter SemiBold 24px   |
  |   H3 — Inter Medium 20px     |
  | Body                         |
  |   Regular — Inter 16px       |
  |   Small   — Inter 14px       |
  | Label                        |
  |   Uppercase — Inter Bold 12px|
  +------------------------------+

Working with Multiple Text Blocks

Hold Ctrl (or Cmd on Mac) and click multiple text elements to select them all at once. You can change the font, size, or color of all selected texts simultaneously from the Design Panel.

Spell Check in Figma

Figma includes a built-in spell checker. Right-click inside any text element and choose Check Spelling. Misspelled words show a red underline, just like a word processor.