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.

Practice

1. Why is typography important in Business Intelligence dashboards?

easy

A. It makes text easier to read and understand.

B. It adds more colors to the dashboard.

C. It increases the number of charts shown.

D. It reduces the amount of data needed.

Solution

1. Step 1: Understand typography's role

   Typography focuses on how text looks and feels, affecting readability.

2. Step 2: Connect typography to BI dashboards

   Clear text helps users quickly grasp information on dashboards.

3. Final Answer:

   It makes text easier to read and understand. -> Option A

4. Quick Check:

   Typography improves readability = C [OK]

Hint: Typography improves text clarity and user understanding [OK]

Common Mistakes:

• Confusing typography with adding colors
• Thinking typography changes data amount
• Believing typography increases charts

2. Which of the following is a correct typography practice in Figma for BI reports?

easy

A. Choose fonts that are easy to read at different sizes.

B. Use very small font sizes to fit more text.

C. Use multiple font styles in every sentence.

D. Avoid spacing between lines to save space.

Solution

1. Step 1: Identify good font choices

   Fonts should be clear and readable at various sizes for BI reports.

2. Step 2: Evaluate options

   Using easy-to-read fonts improves clarity; very small fonts or no spacing reduce readability.

3. Final Answer:

   Choose fonts that are easy to read at different sizes. -> Option A

4. Quick Check:

   Readable fonts = A [OK]

Hint: Pick fonts clear at all sizes for readability [OK]

Common Mistakes:

• Using tiny fonts that are hard to read
• Mixing too many font styles
• Skipping line spacing

3. In a Figma BI dashboard, if the font size is set too small and the color contrast is low, what is the likely result?

medium

A. The dashboard will load faster due to smaller text.

B. Users will find the text hard to read and may miss key insights.

C. More data points will be visible on the screen.

D. The dashboard will automatically adjust font sizes.

Solution

1. Step 1: Analyze font size and color contrast effects

   Small fonts and low contrast reduce text readability.

2. Step 2: Understand user impact

   Hard-to-read text causes users to miss important information.

3. Final Answer:

   Users will find the text hard to read and may miss key insights. -> Option B

4. Quick Check:

   Small font + low contrast = poor readability = A [OK]

Hint: Small font + low contrast = hard to read [OK]

Common Mistakes:

• Thinking small fonts speed up loading
• Assuming more data shows automatically
• Believing dashboard auto-adjusts fonts

4. You notice your BI dashboard text is hard to read. Which Figma typography setting is most likely causing this issue?

medium

A. Font size set to 18px with black text on light yellow background.

B. Font size set to 16px with black text on white background.

C. Font size set to 14px with dark blue text on white background.

D. Font size set to 8px with light gray text on white background.

Solution

1. Step 1: Identify poor typography settings

   Very small font size and low contrast colors reduce readability.

2. Step 2: Compare options

   Font size set to 8px with light gray text on white background has 8px font and light gray on white, making text hard to see.

3. Final Answer:

   Font size set to 8px with light gray text on white background. -> Option D

4. Quick Check:

   Small font + low contrast = readability issue = D [OK]

Hint: Check font size and contrast for readability issues [OK]

Common Mistakes:

• Ignoring font size too small
• Overlooking color contrast problems
• Assuming all light colors are readable

5. You are designing a BI dashboard in Figma for users with visual impairments. Which typography approach best improves readability?

hard

A. Use small fonts with multiple colors and tight line spacing.

B. Use cursive fonts with low contrast colors to reduce glare.

C. Use large, high-contrast fonts with clear spacing and avoid decorative fonts.

D. Use many font styles and sizes to highlight all data points.

Solution

1. Step 1: Consider needs of visually impaired users

   They need large, clear fonts with strong contrast and good spacing.

2. Step 2: Evaluate typography options

   Use large, high-contrast fonts with clear spacing and avoid decorative fonts uses large, high-contrast fonts and clear spacing, improving readability.

3. Final Answer:

   Use large, high-contrast fonts with clear spacing and avoid decorative fonts. -> Option C

4. Quick Check:

   Large, clear fonts + contrast = best readability = B [OK]

Hint: Large, clear fonts with contrast help all users read better [OK]

Common Mistakes:

• Using small or decorative fonts
• Choosing low contrast colors
• Overloading with many font styles