Letter spacing and paragraph spacing in Figma - Step-by-Step Guide

Introduction

Letter spacing and paragraph spacing help you control the space between letters and lines in your text. This makes your text easier to read and looks neat in reports or dashboards.

When you want to make a dashboard title stand out by adjusting space between letters

When your paragraph text looks crowded and you want to add space between lines for clarity

When you need consistent spacing in text blocks across multiple report pages

When you want to improve readability of labels on charts by adjusting letter spacing

When you want to fix overlapping text in a text box by increasing paragraph spacing

Steps

Step 1: Select the text layer

- Layers panel or directly on the canvas

The text layer is highlighted and text properties appear in the right sidebar

Step 2: Click the Text section

- Right sidebar

Text formatting options expand showing font, size, weight, and spacing controls

Step 3: Adjust letter spacing

- Letter spacing input box in the Text section

The space between each letter in the selected text changes immediately

💡 Use positive values to increase space and negative values to decrease space

Step 4: Adjust paragraph spacing

- Paragraph spacing input box in the Text section

The space between paragraphs in the selected text changes immediately

💡 Increase paragraph spacing to separate paragraphs clearly

Step 5: Click outside the text box

- Canvas area

Changes are applied and you see the updated text spacing on your design

Before vs After

Before

Text block with letters tightly spaced and paragraphs close together, making it hard to read

After

Text block with increased letter spacing and paragraph spacing, making text clearer and easier to read

Settings Reference

Letter spacing

📍 Right sidebar > Text section

Controls the space between individual letters in the text

Default: 0 px

Paragraph spacing

📍 Right sidebar > Text section

Controls the space between paragraphs in multi-paragraph text

Default: 0 px

Common Mistakes

Setting letter spacing too high

Makes text look broken and hard to read

Use small positive values and preview changes to keep text readable

Confusing letter spacing with paragraph spacing

Adjusting the wrong spacing does not fix the intended text layout issue

Use letter spacing for space between letters and paragraph spacing for space between paragraphs

Summary

Letter spacing adjusts space between letters to improve text appearance

Paragraph spacing adjusts space between paragraphs for better readability

Use the Text section in the right sidebar to change these settings in Figma

Practice

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