0
0
Figmabi_tool~5 mins

Why typography drives readability in Figma - Why Use It

Choose your learning style9 modes available
Introduction
Typography is how text looks on a screen or paper. Good typography makes reports and dashboards easier to read and understand. This helps people find the right information quickly.
When creating a sales report that many people will read on different devices
When designing a dashboard that shows key numbers clearly to managers
When making a presentation with charts and text that must be easy to follow
When building a data story that guides users through insights step-by-step
When you want to improve the look and feel of your business reports
Steps
Step 1: Select the text layer you want to improve
- Layers panel
The text layer is highlighted and ready for editing
Step 2: Click the Text section in the right sidebar
- Properties panel
Typography options like font, size, line height, and letter spacing appear
Step 3: Choose a clear, easy-to-read font like 'Inter' or 'Roboto'
- Font dropdown in the Text section
The text changes to the selected font, improving readability
💡 Sans-serif fonts are usually easier to read on screens
Step 4: Adjust the font size to at least 14 pixels for body text
- Font size input in the Text section
Text becomes larger and easier to read without strain
Step 5: Set line height to about 1.4 to 1.6 times the font size
- Line height input in the Text section
Lines of text have enough space, making reading smoother
Step 6: Increase letter spacing slightly if the text looks crowded
- Letter spacing input in the Text section
Letters have more space, improving clarity
Step 7: Preview your text on different screen sizes using the Preview mode
- Play button in the top-right corner
You see how the typography looks on various devices
Before vs After
Before
Text uses a small font size (10px), tight line height, and a decorative font making it hard to read
After
Text uses a clear sans-serif font at 16px size, with comfortable line height and letter spacing, making it easy to read
Settings Reference
Font Family
📍 Properties panel > Text section > Font dropdown
Choose the style of letters to improve readability and tone
Default: Roboto
Font Size
📍 Properties panel > Text section > Font size input
Control how large the text appears for easy reading
Default: 14px
Line Height
📍 Properties panel > Text section > Line height input
Adjust vertical spacing between lines to avoid crowding
Default: Auto
Letter Spacing
📍 Properties panel > Text section > Letter spacing input
Control horizontal space between letters for clarity
Default: 0px
Common Mistakes
Using very small font sizes under 12px
Small text strains the eyes and reduces readability, especially on screens
Use at least 14px font size for body text to ensure comfort
Choosing fancy or script fonts for large text blocks
Decorative fonts slow reading and cause confusion in reports
Use simple, clean fonts like Inter or Roboto for main text
Setting line height too tight or too loose
Too tight lines make text cramped; too loose lines break reading flow
Set line height between 1.4 and 1.6 times font size for balance
Summary
Good typography makes business reports and dashboards easier to read and understand
Use clear fonts, proper font size, line height, and letter spacing to improve readability
Avoid small fonts and decorative fonts for main text to keep information clear