Bird
Raised Fist0
Figmabi_tool~15 mins

Letter spacing and paragraph spacing in Figma - Real Business Scenario

Choose your learning style10 modes available
LearnWhyDeepSheetTryChallengeScenarioRecallDash

Start learning this pattern below

Jump into concepts and practice - no test required

or
Recommended
Test this pattern10 questions across easy, medium, and hard to know if this pattern is strong
Scenario Mode
👤 Your Role: You are a BI report designer using Figma to create clear and readable dashboards.
📋 Request: Your manager wants you to improve the readability of a sales report by adjusting letter spacing and paragraph spacing in text elements.
📊 Data: You have a Figma file with text blocks showing sales summaries, product descriptions, and key insights. The text currently looks cramped and hard to read.
🎯 Deliverable: A Figma design file where letter spacing and paragraph spacing are adjusted for better readability and professional appearance.
Progress0 / 4 steps
Sample Data
Text ElementCurrent Letter Spacing (px)Current Paragraph Spacing (px)Content
Title00Monthly Sales Report
Subtitle00Summary of sales trends
Paragraph 100Sales increased steadily over the last quarter.
Paragraph 200Product A showed the highest growth.
Paragraph 300Marketing campaigns contributed to the increase.
1
Step 1: Select the Title text element in Figma.
Set letter spacing to 2 px to make the title stand out clearly.
Expected Result
Title text 'Monthly Sales Report' appears more spaced and easier to read.
2
Step 2: Select the Subtitle text element.
Set letter spacing to 1 px and paragraph spacing to 8 px to separate subtitle from other text.
Expected Result
Subtitle 'Summary of sales trends' looks distinct and visually separated.
3
Step 3: Select all paragraph text elements (Paragraph 1, 2, and 3).
Set letter spacing to 0.5 px and paragraph spacing to 12 px for better readability and clear separation between paragraphs.
Expected Result
Paragraph texts have improved spacing making them easier to read and visually organized.
4
Step 4: Preview the entire report in Figma.
Check that all text elements have consistent spacing and the report looks clean and professional.
Expected Result
The report text is clear, spaced well, and easy to read on screen.
Final Result
Monthly  Sales  Report

Summary  of  sales  trends

Sales increased steadily over the last quarter.

Product A showed the highest growth.

Marketing campaigns contributed to the increase.
✓Increasing letter spacing on titles improves emphasis and clarity.
✓Adding paragraph spacing separates ideas and improves reading flow.
✓Small letter spacing on paragraphs enhances readability without wasting space.
Bonus Challenge

Create a Figma prototype showing before and after views of the report text with spacing adjustments.

Show Hint
Use Figma's component variants or duplicate frames to show the original and improved text side by side.

Practice

(1/5)
1. What does letter spacing control in a text block?
easy
A. The space between individual letters
B. The space between words
C. The space between paragraphs
D. The font size of the text

Solution

  1. Step 1: Understand letter spacing meaning

    Letter spacing means adjusting the space between each letter in a word.

  2. Step 2: Differentiate from other spacing types

    Word spacing is space between words; paragraph spacing is space between paragraphs.

  3. Final Answer:

    The space between individual letters -> Option A

  4. Quick Check:

    Letter spacing = space between letters [OK]
Hint: Letter spacing = space between letters, not words or paragraphs [OK]
Common Mistakes:
  • Confusing letter spacing with word spacing
  • Thinking paragraph spacing affects letters
  • Mixing font size with spacing
2. Which CSS property correctly sets letter spacing to 2 pixels?
easy
A. paragraph-spacing: 2px;
B. letter-spacing: 2px;
C. spacing-letter: 2px;
D. text-spacing: 2px;

Solution

  1. Step 1: Identify correct CSS property for letter spacing

    The correct CSS property is letter-spacing.

  2. Step 2: Check syntax correctness

    Setting it as letter-spacing: 2px; is valid CSS syntax.

  3. Final Answer:

    letter-spacing: 2px; -> Option B

  4. Quick Check:

    Correct CSS property = letter-spacing [OK]
Hint: Remember CSS property is exactly 'letter-spacing' [OK]
Common Mistakes:
  • Using non-existent properties like paragraph-spacing
  • Swapping property names
  • Missing hyphen in property name
3. Given this CSS snippet:
p { letter-spacing: 3px; paragraph-spacing: 10px; }

What will happen when applied to paragraphs in a BI report?
medium
A. Letters will have 3px spacing; paragraph-spacing will be ignored as invalid
B. Both letter-spacing and paragraph-spacing will be ignored
C. Paragraphs will have 3px spacing; letters will have 10px spacing
D. Letters in paragraphs will be spaced out by 3px; paragraphs will have 10px space between them

Solution

  1. Step 1: Understand letter-spacing effect

    Letter-spacing: 3px will space letters by 3 pixels correctly.

  2. Step 2: Check validity of paragraph-spacing

    CSS does not have a paragraph-spacing property, so it will be ignored.

  3. Final Answer:

    Letters will have 3px spacing; paragraph-spacing will be ignored as invalid -> Option A

  4. Quick Check:

    Valid CSS property works; invalid ignored [OK]
Hint: Only valid CSS properties apply; invalid ones are ignored [OK]
Common Mistakes:
  • Assuming paragraph-spacing is valid CSS
  • Mixing letter and paragraph spacing values
  • Expecting both properties to work
4. You want to increase space between paragraphs in a BI report using Figma. Which approach fixes this incorrect CSS?
p { letter-spacing: 1px; paragraph-spacing: 15px; }
medium
A. Use padding-left: 15px; on paragraphs
B. Change letter-spacing to 15px
C. Add line-height: 15px; instead
D. Replace paragraph-spacing with margin-bottom: 15px;

Solution

  1. Step 1: Identify invalid property

    paragraph-spacing is not a valid CSS property.

  2. Step 2: Use correct CSS to add space between paragraphs

    Using margin-bottom: 15px; adds space below each paragraph, effectively spacing paragraphs.

  3. Final Answer:

    Replace paragraph-spacing with margin-bottom: 15px; -> Option D

  4. Quick Check:

    Margin controls spacing between blocks [OK]
Hint: Use margin-bottom to space paragraphs, not paragraph-spacing [OK]
Common Mistakes:
  • Using line-height to add paragraph spacing
  • Changing letter-spacing instead of paragraph spacing
  • Using padding-left which affects horizontal space
5. In a BI dashboard, you want text to be easy to read with balanced spacing. Which combination of settings is best?

letter-spacing: 0.05em;
margin-bottom: 1.5em;

Why is this better than letter-spacing: 0; and margin-bottom: 0.5em;?
hard
A. Letter spacing should be negative; margin-bottom should be zero
B. Zero letter spacing is clearer; smaller margin saves space
C. Slight letter spacing improves clarity; larger margin separates paragraphs clearly
D. Letter spacing and margin-bottom do not affect readability

Solution

  1. Step 1: Understand letter spacing impact

    Slight positive letter spacing (0.05em) helps letters not crowd each other, improving clarity.

  2. Step 2: Understand paragraph spacing impact

    Larger margin-bottom (1.5em) clearly separates paragraphs, making text easier to scan.

  3. Final Answer:

    Slight letter spacing improves clarity; larger margin separates paragraphs clearly -> Option C

  4. Quick Check:

    Balanced spacing = better readability [OK]
Hint: Small letter spacing + bigger paragraph margin = clearer text [OK]
Common Mistakes:
  • Thinking zero spacing is always best
  • Ignoring paragraph spacing importance
  • Using negative letter spacing which reduces clarity