Font size and line height in Figma - Dashboard Guide

Dashboard Mode - Font size and line height

Dashboard Goal

Understand how font size and line height affect readability and layout in BI dashboards.

Sample Data

Text Sample	Font Size (px)	Line Height (px)	Readability Score (1-10)
Small text, tight lines	12	14	5
Small text, spacious lines	12	18	7
Medium text, tight lines	16	18	7
Medium text, spacious lines	16	24	9
Large text, tight lines	20	22	8
Large text, spacious lines	20	28	10

Dashboard Components

• KPI Card: Average Readability Score
  Formula: AVERAGE of Readability Score column = (5+7+7+9+8+10)/6 = 7.67
• Bar Chart: Font Size vs Average Readability
  Groups: Font Size 12, 16, 20
  Calculations:
  - 12 px: (5+7)/2 = 6
  - 16 px: (7+9)/2 = 8
  - 20 px: (8+10)/2 = 9
• Line Chart: Line Height vs Readability for each Font Size
  Plots line height on X-axis, readability on Y-axis, separate line for each font size (12,16,20)
• Data Table: Shows all sample data rows for reference

Dashboard Layout

+----------------------+----------------------+
|   KPI Card           |   Bar Chart          |
|  (Avg Readability)   |                      |
+----------------------+----------------------+
|                      Data Table             |
|                                            |
+--------------------------------------------+
|               Line Chart                    |
+--------------------------------------------+

Interactivity

User can select a Font Size filter (12, 16, or 20 px). This filter updates:

• Bar Chart to show readability only for selected font size
• Line Chart to show line height vs readability for selected font size
• Data Table to show only rows matching selected font size
• KPI Card updates average readability for selected font size

Self Check

If you add a filter to show only Font Size = 16 px, which components update and what changes occur?

• KPI Card: Average readability changes to (7+9)/2 = 8
• Bar Chart: Shows only bar for 16 px with value 8
• Line Chart: Shows line for font size 16 with points at line heights 18 (7) and 24 (9)
• Data Table: Shows only rows with font size 16

Key Result

Dashboard shows how font size and line height affect readability scores with interactive filters.