Figma Text and Typography
Text carries most of the meaning in any design. Figma's text tools give you full control over fonts, sizes, spacing, and alignment. Good typography choices make designs easier to read and more visually consistent.
Adding Text
Press T to activate the text tool. You have two options:
- Click once on the canvas — creates a text box that expands horizontally as you type.
- Click and drag — creates a fixed-width text box. Text wraps to the next line when it reaches the edge.
Double-click any existing text to enter edit mode and change the content. Press Esc to exit edit mode and select the text layer.
Text Properties in the Right Panel
Text Layer Selected – Right Panel ------------------------------------ Font family: Inter Font style: Medium Font size: 16 Line height: 24 (auto or custom) Letter spacing: 0% ------------------------------------ Alignment: [Left] [Center] [Right] [Justify] ------------------------------------ Text decoration: None / Underline / Strikethrough Text transform: None / UPPERCASE / lowercase / Title Case ------------------------------------ Fill: [text color] ------------------------------------
Font Families
Figma connects to Google Fonts and lets you use any font installed on your computer. Type the font name in the font family field to search. Popular choices for digital products include:
- Inter – Clean, modern, designed for screens.
- Roboto – Google's default Android font.
- SF Pro – Apple's system font (requires macOS installation).
- Poppins – Rounded, friendly, popular for consumer apps.
- Lato – Neutral, widely readable for body text.
Type Scale: Building a Hierarchy
A type scale assigns specific font sizes to different text roles. Using a scale creates visual order — readers scan headings first, then subheadings, then body text.
Typical Mobile Type Scale ----------------------------- Display: 32px – Bold (hero headlines) Heading 1: 24px – SemiBold (section titles) Heading 2: 20px – SemiBold (card titles) Body: 16px – Regular (paragraph text) Caption: 12px – Regular (labels, hints) -----------------------------
Line Height
Line height controls the vertical space between lines of text. A line height equal to the font size produces cramped text. A line height of 1.4× to 1.6× the font size is comfortable for body text.
Font size 16px: Line height 16px → Lines touch each other (too tight) Line height 24px → Comfortable spacing (1.5× ratio) Line height 32px → Too much space between lines
Letter Spacing
Letter spacing (also called tracking) adjusts the space between all characters uniformly. Positive values spread letters apart. Negative values bring them closer. All-caps headings often benefit from slight positive letter spacing (50–100 units) to improve readability.
Text Resizing Modes
Select a text layer and look at the right panel for the resizing option.
- Auto width – Box grows wider as you type. Good for short labels.
- Auto height – Width stays fixed; box grows taller as text wraps. Good for paragraphs.
- Fixed size – Width and height are fixed. Text clips if it overflows. Use only when you know the content length.
Text Truncation with Ellipsis
In fixed-size mode, you can enable truncation. Figma adds an ellipsis (…) when the text is too long to fit. This simulates real application behavior where text is cut with "…" at the end.
Mixed Text Styles in One Layer
Highlight specific words inside a text layer to change only those words. You can make one word bold, another a different color, and the rest normal — all within a single text object. This is useful for labels like "Save 20% today."
Text Styles (Reusable Typography)
You can save a font + size + weight combination as a named text style. Once saved, you apply it to any text layer with one click. If you later change the style (for example, increase the body font from 14px to 16px), every text layer using that style updates automatically.
Creating a Text Style
- Format a text layer with the desired font, size, and weight.
- Click the four-dot icon next to the text section in the right panel.
- Click + to save it as a new style.
- Give it a clear name like Body/Regular or Heading/H1.
Practical Tip: Using Two Fonts Maximum
Most professional designs use no more than two font families — one for headings and one for body text. Using more than two fonts makes a design feel inconsistent. Pair a display font (heavier, more personality) with a neutral body font (clean, readable at small sizes).