0
0
Figmabi_tool~5 mins

Font size and line height in Figma - Step-by-Step Guide

Choose your learning style9 modes available
Introduction
Adjusting font size and line height helps make text easy to read and visually balanced in your designs. This feature lets you control how big the text appears and how much space is between lines.
When you want to make headings stand out by increasing their size.
When body text looks crowded and you need to add space between lines for clarity.
When designing reports or dashboards that must be readable on different screen sizes.
When you want consistent text spacing across multiple text boxes.
When adjusting text to fit within a specific area without cutting off words.
Steps
Step 1: Select the text layer
- Canvas or Layers panel
The text layer is highlighted and its properties appear in the right sidebar
Step 2: Locate the Text section
- Right sidebar
Font size and line height controls are visible
Step 3: Click the font size input box
- Text section in right sidebar
You can type a new font size or use the up/down arrows to adjust it
💡 Use whole numbers for font size to keep text sharp
Step 4: Click the line height input box
- Text section in right sidebar
You can type a new line height value or use the up/down arrows to adjust spacing between lines
💡 Set line height to about 120% to 150% of font size for best readability
Step 5: Observe the text on canvas
- Canvas
Text updates immediately to reflect new font size and line height
Before vs After
Before
Text with font size 12px and line height set to Auto, lines appear very close together
After
Text with font size increased to 16px and line height set to 24px, lines have clear spacing and text is easier to read
Settings Reference
Font Size
📍 Right sidebar > Text section
Controls how large the text appears
Default: Depends on the selected font and text style
Line Height
📍 Right sidebar > Text section
Controls vertical spacing between lines of text
Default: Auto (usually about 120% of font size)
Common Mistakes
Setting line height smaller than font size
Lines overlap and text becomes hard to read
Always set line height equal to or greater than font size
Using inconsistent font sizes across similar text elements
Design looks unbalanced and confusing
Use consistent font sizes for headings, body text, and labels
Summary
Font size controls how big your text looks on the screen.
Line height controls the space between lines to improve readability.
Always keep line height equal to or larger than font size to avoid overlapping text.