Font size and line height in Figma - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

Understanding the relationship between font size and line height

In a dashboard design, why is it important to set the line height relative to the font size?

A To make the font size smaller than the container width

B To ensure text lines have enough space for readability without overlapping

C To change the font color automatically based on size

D To align text vertically in the middle of the page

💡 Hint

Think about how text looks when lines are too close or too far apart.

Setting line height relative to font size ensures that lines of text have enough vertical space, improving readability and preventing overlap.

❓ visualization

intermediate

Choosing appropriate font size and line height for dashboard titles

You want to create a dashboard title that is clear and easy to read on all screen sizes. Which combination of font size and line height is best?

A Font size 24px with line height 28px

B Font size 24px with line height 18px

C Font size 12px with line height 24px

D Font size 36px with line height 12px

💡 Hint

Line height should be slightly larger than font size for clarity.

A line height slightly larger than the font size (like 28px for 24px font) provides enough spacing for clear reading without crowding.

❓ dax_lod_result

advanced

Calculating dynamic line height in Power BI using DAX

You want to create a measure that sets line height dynamically based on font size in Power BI. Which DAX expression correctly calculates line height as 1.2 times the font size?

Figma

FontSize = 14
LineHeight = FontSize * 1.2

A LineHeight = [FontSize] * 1.2

B LineHeight = SUM([FontSize]) * 1.2

C LineHeight = [FontSize] / 1.2

D LineHeight = CALCULATE([FontSize] + 1.2)

💡 Hint

Think about simple multiplication of a measure.

The correct way to calculate line height as 1.2 times font size is to multiply the font size measure by 1.2 directly.

🔧 Formula Fix

advanced

Fixing inconsistent line height in a Figma text style

A text style in Figma has font size 16px but line height set to 12px, causing text lines to overlap. Which option correctly fixes this issue?

A Change font size to 20px and keep line height 12px

B Decrease font size to 10px

C Set line height to 0px

D Increase line height to at least 19px

💡 Hint

Line height should be equal or greater than font size for readability.

Increasing line height to a value greater than font size prevents overlapping and improves readability.

🎯 Scenario

expert

Designing responsive text for a BI dashboard

You need to design a BI dashboard text style that adjusts font size and line height for different screen sizes automatically. Which approach best achieves this?

A Use absolute units like pt for font size and fixed line height in px

B Set fixed pixel font size and line height for all screens

C Use relative units like rem for font size and set line height as a unitless multiplier

D Manually create separate text styles for each screen size without relative units

💡 Hint

Think about how relative units help with scaling on different devices.

Using relative units like rem for font size and unitless line height multiplier allows text to scale proportionally across screen sizes, ensuring readability and consistency.

Practice

1. What does font size control in Figma?

easy

A. The color of the text

B. The space between lines of text

C. How big the text appears on the screen

D. The font style like bold or italic

Solution

1. Step 1: Understand font size meaning

   Font size determines how large or small the text looks visually.

2. Step 2: Differentiate from line height

   Line height controls spacing between lines, not size of text.

3. Final Answer:

   How big the text appears on the screen -> Option C

4. Quick Check:

   Font size = Text size [OK]

Hint: Font size = text height, line height = space between lines [OK]

Common Mistakes:

• Confusing font size with line height
• Thinking font size changes text color
• Mixing font size with font style

2. Which of the following is the correct way to set font size and line height in Figma's text properties panel?

easy

A. Font size as a percentage, line height in pixels only

B. Font size in pixels, line height as a number or percentage

C. Both font size and line height only accept percentages

D. Font size and line height cannot be changed in Figma

Solution

1. Step 1: Check Figma text property inputs

   Font size is set in pixels (px) for exact text height.

2. Step 2: Understand line height input

   Line height can be set as a number (like 24) or percentage (like 150%).

3. Final Answer:

   Font size in pixels, line height as a number or percentage -> Option B

4. Quick Check:

   Font size = px, line height = number or % [OK]

Hint: Font size uses px, line height can be px or % [OK]

Common Mistakes:

• Trying to set font size as a percentage
• Assuming line height only accepts pixels
• Believing font size and line height cannot be changed

3. If a text block has a font size of 16px and a line height of 24px in Figma, what is the space between the lines of text?

medium

A. 8px

B. 24px

C. 16px

D. 40px

Solution

1. Step 1: Understand line height vs font size

   Line height is total height of each line including text and space.

2. Step 2: Calculate space between lines

   Space = line height - font size = 24px - 16px = 8px.

3. Final Answer:

   8px -> Option A

4. Quick Check:

   Line height - font size = space [OK]

Hint: Subtract font size from line height for spacing [OK]

Common Mistakes:

• Confusing line height as only the space
• Using font size instead of difference
• Adding font size and line height

4. You set a font size of 18px and line height of 14px in Figma. What issue will this cause?

medium

A. Font size will automatically adjust to 14px

B. Text will be too spaced out

C. No issue, this is a valid setting

D. Lines will overlap because line height is less than font size

Solution

1. Step 1: Compare font size and line height values

   Font size is 18px, line height is smaller at 14px.

2. Step 2: Understand effect of smaller line height

   Line height less than font size causes lines to overlap visually.

3. Final Answer:

   Lines will overlap because line height is less than font size -> Option D

4. Quick Check:

   Line height < font size = overlap [OK]

Hint: Line height must be ≥ font size to avoid overlap [OK]

Common Mistakes:

• Thinking font size adjusts automatically
• Assuming no problem if line height is smaller
• Confusing line height with letter spacing

5. You want to design a dashboard with text that is easy to read on all screen sizes. Which combination of font size and line height is best practice in Figma?

hard

A. Font size 14px with line height 20px for good spacing

B. Font size 10px with line height 10px for compact text

C. Font size 18px with line height 14px to save space

D. Font size 12px with line height 12px for uniformity

Solution

1. Step 1: Consider readability on screens

   Font size 14px is readable; line height 20px gives enough space between lines.

2. Step 2: Evaluate other options

   Options with line height equal or less than font size cause cramped or overlapping text.

3. Final Answer:

   Font size 14px with line height 20px for good spacing -> Option A

4. Quick Check:

   Readable font + enough line height = best practice [OK]

Hint: Choose line height about 1.4x font size for readability [OK]

Common Mistakes:

• Picking line height equal to or less than font size
• Choosing too small font size for screens
• Ignoring line height impact on readability