How to Use Line Height in Figma: Simple Steps for Text Styling

In Figma, you can adjust line height by selecting your text layer and changing the Line height value in the Text properties panel. This controls the vertical space between lines, helping improve readability and style.

Syntax

In Figma, line height is set in the Text properties panel as a numeric value or percentage. It controls the vertical spacing between lines of text.

• Auto: Default spacing based on font size.
• Number: Fixed pixel value for line height.
• Percentage: Relative to font size (e.g., 150%).

text

Select text layer -> Text panel -> Line height input -> Enter value (e.g., 24 or 150%)

Example

This example shows how to set line height to 150% for better readability in a paragraph.

text

1. Select the text layer in your Figma file.
2. Open the Text properties panel on the right.
3. Find the Line height field.
4. Enter 150% and press Enter.
5. Observe the increased space between lines.

Output

The paragraph text lines have more vertical space, making it easier to read.

Common Pitfalls

Common mistakes when using line height in Figma include:

• Setting line height too small, causing lines to overlap.
• Using very large line height, making text look disconnected.
• Forgetting to select the correct text layer before adjusting.
• Confusing Auto with fixed values, leading to unexpected spacing.

Always preview your text after changing line height to ensure readability.

text

Wrong:
Select text -> Line height: 10 (too small)

Right:
Select text -> Line height: 24 (appropriate for font size 16)

Quick Reference

Line Height Setting	Description	When to Use
Auto	Default spacing based on font size	General use for balanced spacing
Number (e.g., 24)	Fixed pixel height between lines	Precise control for design consistency
Percentage (e.g., 150%)	Relative spacing based on font size	Flexible spacing that scales with text size

Key Takeaways

Adjust line height in Figma via the Text properties panel to control vertical spacing.

Use percentages or fixed numbers to customize spacing for readability and style.

Avoid too small or too large line heights to keep text clear and connected.

Always select the correct text layer before changing line height.

Preview changes to ensure your text looks balanced and easy to read.