Letter spacing and paragraph spacing in Figma - Cell-by-Cell Formula Trace

Concept Flow

[Start with base text width] → [Count letters in text] → [Calculate spaces between letters = letters - 1] → [Multiply spaces by letter spacing value] → [Add result to base width] → [Apply paragraph spacing between paragraphs]

This flow shows how letter spacing increases the width of text by adding space between letters, and paragraph spacing adds vertical space between paragraphs.

Formula

Adjusted Width = Base Width + (Number of Letters - 1) * Letter Spacing

Formula to calculate the adjusted width of text after applying letter spacing.

Step-by-Step Trace

Step	Operation	Input/State	Result	Explanation
1	Count letters	'Hello World' (ignore spaces)	10	Counting letters excluding spaces
2	Calculate spaces	10 letters	9	Spaces between letters is one less than letters
3	Multiply spacing	9 * 2px	18px	Letter spacing times number of spaces
4	Add to base width	Base Width + 18px	Base Width + 18px	Final adjusted width including letter spacing

The adjusted width accounts for letter spacing by adding space between letters.

Variable Tracker

Step	Variable	Value Before	Value After
1	Number of Letters	N/A	10
2	Spaces Between Letters	N/A	9
3	Letter Spacing Total	N/A	18px
4	Adjusted Width	Base Width	Base Width + 18px

Key Moments

Why do we subtract one from the number of letters to get spaces?

What does paragraph spacing control?

How does letter spacing affect text width?

Sheet Trace Quiz - 3 Questions

How many spaces between letters are counted for letter spacing in 'Hello World'?

A 10

B 9

C 11

D 8

Key Result

Letter spacing adds horizontal space between letters by multiplying the number of spaces (letters minus one) by the spacing value and adding it to the base text width. Paragraph spacing adds vertical space between paragraphs.

Transcript

We start by counting the letters in the text, ignoring spaces. Then, we calculate the number of spaces between letters, which is one less than the number of letters. Next, we multiply this number by the letter spacing value in pixels. Finally, we add this total spacing to the base width of the text to get the adjusted width. Paragraph spacing is separate and controls vertical spacing between paragraphs.