Letter spacing and paragraph spacing in Figma - Dashboard Guide

Dashboard Mode - Letter spacing and paragraph spacing

Goal

Understand how adjusting letter spacing and paragraph spacing affects text readability and presentation in reports and dashboards.

Sample Text Data

Paragraph	Text
1	Sales increased steadily over the last quarter.
2	Customer satisfaction ratings improved by 15%.
3	New product launches contributed to revenue growth.
4	Marketing campaigns reached a wider audience.
5	Operational costs were reduced by optimizing processes.

Dashboard Components

• KPI Card: Displays a key message with letter spacing set to 0.05em to improve readability of short text.
• Paragraph Text Block: Shows multiple paragraphs with paragraph spacing set to 1.5em to visually separate ideas.
• Comparison Text Block: Two versions of the same paragraph side by side: one with default spacing, one with increased letter and paragraph spacing for clarity.

Dashboard Layout

+----------------------+--------------------------+
|      KPI Card        |   Comparison Text Block  |
|  (Letter spacing 0.05em) | (Default vs Spaced Text) |
+----------------------+--------------------------+
|                Paragraph Text Block               |
|           (Paragraph spacing 1.5em)               |
+---------------------------------------------------+

Interactivity

Users can toggle letter spacing and paragraph spacing settings using sliders or dropdowns. Changing these settings updates all text blocks live, allowing users to see how spacing affects readability and layout.

Self Check

If you increase letter spacing to 0.1em and paragraph spacing to 2em, which components update their text appearance?

• KPI Card updates letter spacing.
• Paragraph Text Block updates paragraph spacing.
• Comparison Text Block updates both letter and paragraph spacing in the spaced version.

Key Result

Dashboard demonstrating effects of letter spacing and paragraph spacing on text readability in BI reports.