Letter spacing and paragraph spacing in Figma - Real Business Scenario

Scenario Mode

👤 Your Role: You are a BI report designer using Figma to create clear and readable dashboards.

📋 Request: Your manager wants you to improve the readability of a sales report by adjusting letter spacing and paragraph spacing in text elements.

📊 Data: You have a Figma file with text blocks showing sales summaries, product descriptions, and key insights. The text currently looks cramped and hard to read.

🎯 Deliverable: A Figma design file where letter spacing and paragraph spacing are adjusted for better readability and professional appearance.

Sample Data

Text Element	Current Letter Spacing (px)	Current Paragraph Spacing (px)	Content
Title	0	0	Monthly Sales Report
Subtitle	0	0	Summary of sales trends
Paragraph 1	0	0	Sales increased steadily over the last quarter.
Paragraph 2	0	0	Product A showed the highest growth.
Paragraph 3	0	0	Marketing campaigns contributed to the increase.

1

Step 1: Select the Title text element in Figma.

Set letter spacing to 2 px to make the title stand out clearly.

Expected Result

Title text 'Monthly Sales Report' appears more spaced and easier to read.

2

Step 2: Select the Subtitle text element.

Set letter spacing to 1 px and paragraph spacing to 8 px to separate subtitle from other text.

Expected Result

Subtitle 'Summary of sales trends' looks distinct and visually separated.

3

Step 3: Select all paragraph text elements (Paragraph 1, 2, and 3).

Set letter spacing to 0.5 px and paragraph spacing to 12 px for better readability and clear separation between paragraphs.

Expected Result

Paragraph texts have improved spacing making them easier to read and visually organized.

4

Step 4: Preview the entire report in Figma.

Check that all text elements have consistent spacing and the report looks clean and professional.

Expected Result

The report text is clear, spaced well, and easy to read on screen.

Final Result

Monthly  Sales  Report

Summary  of  sales  trends

Sales increased steadily over the last quarter.

Product A showed the highest growth.

Marketing campaigns contributed to the increase.

✓Increasing letter spacing on titles improves emphasis and clarity.

✓Adding paragraph spacing separates ideas and improves reading flow.

✓Small letter spacing on paragraphs enhances readability without wasting space.

Bonus Challenge

Create a Figma prototype showing before and after views of the report text with spacing adjustments.

Show Hint

Use Figma's component variants or duplicate frames to show the original and improved text side by side.