Dashboard Mode - Why typography drives readability
Business Question
How does typography affect the readability of text in reports and dashboards?
0
0
Why typography drives readability in Figma - Dashboard Impact
Sample Data
| Font Type | Font Size (pt) | Line Spacing (em) | Readability Score (1-10) | Comments |
|---|---|---|---|---|
| Sans-serif | 12 | 1.2 | 8 | Clear and easy to read |
| Serif | 12 | 1.2 | 7 | Good but slightly dense |
| Sans-serif | 10 | 1.0 | 6 | Smaller size reduces clarity |
| Serif | 14 | 1.5 | 9 | Larger size and spacing improve readability |
| Monospace | 12 | 1.2 | 5 | Less natural flow for reading |
| Sans-serif | 16 | 1.8 | 10 | Optimal size and spacing |
Dashboard Components
- KPI Card: Average Readability Score
Formula: Average of "Readability Score" column = (8+7+6+9+5+10)/6 = 7.5 - Bar Chart: Readability Score by Font Type
Shows average readability score for each font type:
- Sans-serif: (8+6+10)/3 = 8.0
- Serif: (7+9)/2 = 8.0
- Monospace: 5 - Line Chart: Readability Score by Font Size
Plots font size on X-axis and readability score on Y-axis for all rows. - Table: Detailed Typography Data
Shows all columns from sample data for reference.
Dashboard Layout
+----------------------+----------------------+ | KPI Card | Bar Chart | | Average Readability | Readability by Font | | Score: 7.5 | Type | +----------------------+----------------------+ | Line Chart | | Readability by Font Size | +----------------------------------------------+ | Data Table | | Detailed Typography Data | +----------------------------------------------+
Interactivity
Filter by Font Type: Selecting a font type updates the Bar Chart, Line Chart, and Data Table to show only data for that font type. The KPI Card updates to show the average readability score for the selected font type.
Filter by Font Size Range: Selecting a font size range updates the Line Chart and Data Table accordingly. The KPI Card and Bar Chart update to reflect the filtered data.
Self Check
If you add a filter for Font Type = "Sans-serif", which components update and what is the new average readability score?
Answer: The KPI Card updates to show average readability score for Sans-serif fonts: (8 + 6 + 10) / 3 = 8.0. The Bar Chart updates to highlight or show only Sans-serif data. The Line Chart and Data Table update to show only Sans-serif font size and readability data.
Key Result
This dashboard shows how different typography choices affect readability scores.