Font size and line height in Figma - Real Business Scenario

Scenario Mode

👤 Your Role: You are a BI dashboard designer working with your marketing team.

📋 Request: Your manager wants you to improve the readability of the sales report dashboard by adjusting font sizes and line heights.

📊 Data: You have a dashboard with sales data visualizations and text labels. The current font size is 12px with line height 14px, which looks cramped.

🎯 Deliverable: A redesigned dashboard with clear, readable text using appropriate font sizes and line heights.

Sample Data

Element	Current Font Size (px)	Current Line Height (px)	Text Sample
Title	12	14	Monthly Sales Report
Subtitle	12	14	January 2024
Data Labels	12	14	Region, Sales
Notes	12	14	Data updated daily

1

Step 1: Select the Title text element in Figma.

Set font size to 24px and line height to 32px.

Expected Result

Title text becomes larger and easier to read with enough space between lines.

2

Step 2: Select the Subtitle text element.

Set font size to 18px and line height to 24px.

Expected Result

Subtitle text is clearly visible and spaced well under the title.

3

Step 3: Select Data Labels on charts and tables.

Set font size to 14px and line height to 20px.

Expected Result

Data labels are readable without crowding the visuals.

4

Step 4: Select Notes or footnotes text.

Set font size to 12px and line height to 18px.

Expected Result

Notes remain smaller but have enough line spacing for clarity.

5

Step 5: Preview the dashboard on different screen sizes.

Check that text scales well and remains readable on desktop and tablet views.

Expected Result

Text is clear and comfortable to read on all tested devices.

Final Result

----------------------------------------
| MONTHLY SALES REPORT                 |
| January 2024                        |
|------------------------------------|
| Region      | Sales                |
| East        | $120,000             |
| West        | $95,000              |
| North       | $110,000             |
| South       | $85,000              |
|------------------------------------|
| Notes: Data updated daily           |
----------------------------------------

✓Increasing font size and line height improves readability.

✓Titles and subtitles need larger fonts and more spacing.

✓Data labels should be clear but not overpower visuals.

✓Notes can be smaller but need enough line height for clarity.

✓Testing on multiple devices ensures accessibility.

Bonus Challenge

Create a style guide in Figma that defines font sizes and line heights for all text elements in the dashboard.

Show Hint

Use Figma text styles to keep font size and line height consistent across your project.