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.