Why typography drives readability in Figma - Business Case Study

Scenario Mode

👤 Your Role: You are a UX designer working with the marketing team.

📋 Request: Your manager wants a report showing how typography choices affect readability in marketing materials.

📊 Data: You have data on font types, sizes, line spacing, and user reading speed scores from test groups.

🎯 Deliverable: Create a Figma dashboard that visualizes the relationship between typography settings and readability scores.

Sample Data

Font Type	Font Size (pt)	Line Spacing (px)	Reading Speed (words/min)
Sans Serif	12	18	220
Serif	12	18	200
Sans Serif	14	20	230
Serif	14	20	210
Sans Serif	16	22	240
Serif	16	22	215
Sans Serif	18	24	245
Serif	18	24	220

1

Step 1: Import the sample data into Figma as a table for reference.

Use Figma's table plugin or create a frame with text layers representing the data columns and rows.

Expected Result

A clear table showing Font Type, Font Size, Line Spacing, and Reading Speed.

2

Step 2: Create a bar chart comparing average reading speed by Font Type.

Group data by Font Type, calculate average Reading Speed: Sans Serif = 233.75, Serif = 211.25. Draw bars with heights proportional to these values.

Expected Result

Bar chart showing Sans Serif bars taller than Serif, indicating higher reading speed.

3

Step 3: Create a line chart showing Reading Speed changes with Font Size for each Font Type.

Plot Font Size on X-axis (12,14,16,18) and Reading Speed on Y-axis. Draw two lines: one for Sans Serif, one for Serif using their respective reading speeds.

Expected Result

Line chart with two lines, Sans Serif line above Serif line, both increasing with font size.

4

Step 4: Add text annotations explaining how larger font sizes and Sans Serif fonts improve readability.

Use text boxes near charts with simple sentences: 'Larger fonts increase reading speed.' 'Sans Serif fonts are easier to read.'

Expected Result

Clear, friendly notes that help viewers understand the charts.

5

Step 5: Arrange all elements in a clean, accessible layout with good contrast and readable font.

Use Figma frames and grids, choose high contrast colors, and use a readable font like Open Sans for labels.

Expected Result

A neat dashboard that is easy to read and navigate.

Final Result

Typography Readability Dashboard

+----------------------+---------------------+
| Font Type Avg Speed  | Font Size vs Speed  |
|                      |                     |
| Sans Serif: 233.75 wpm  | 18pt: 245 wpm       |
| Serif: 211.25 wpm       | 16pt: 240 wpm       |
|                      | 14pt: 230 wpm       |
|                      | 12pt: 220 wpm       |
+----------------------+---------------------+

Notes:
- Larger font sizes improve reading speed.
- Sans Serif fonts are easier to read.

✓Sans Serif fonts lead to higher reading speeds than Serif fonts.

✓Increasing font size improves readability and reading speed.

✓Line spacing combined with font size supports better reading performance.

✓Simple typography choices can significantly enhance user experience.

Bonus Challenge

Add interactive filters in Figma to let users select font type or size and see updated readability scores.

Show Hint

Use Figma components and variants to simulate filter buttons and swap charts based on selection.