Font size and line height in Figma - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is font size in design?

Font size is the height of the text characters, usually measured in pixels or points. It controls how big or small the text appears on the screen.

beginner

What does line height control in text layout?

Line height controls the vertical space between lines of text. It helps make text easier to read by adding space above and below each line.

intermediate

Why is it important to balance font size and line height?

Balancing font size and line height ensures text is readable and visually comfortable. Too small line height makes text cramped; too large makes it disconnected.

beginner

In Figma, how can you adjust line height for a text layer?

Select the text layer, then in the right panel under 'Text', find the 'Line height' setting. You can enter a number or use the dropdown to choose 'Auto' or fixed values.

intermediate

What is a good practice for setting line height relative to font size?

A common practice is to set line height to about 120% to 150% of the font size. For example, if font size is 16px, line height can be 19px to 24px for good readability.

What does increasing line height do to text?

A Increases space between lines

B Makes text bold

C Changes font color

D Decreases font size

Increasing line height adds more vertical space between lines, improving readability.

If font size is 20px, which line height is best for readability?

A 10px

B 20px

C 30px

D 50px

Line height around 120%-150% of font size (24-30px) is ideal. 30px fits this range.

In Figma, where do you find the line height setting?

A In the Layers panel

B In the right panel under Text

C In the Assets panel

D In the Plugins menu

Line height is adjusted in the right panel under the Text section when a text layer is selected.

What happens if line height is too small compared to font size?

A Text becomes italic

B Text becomes bold

C Text color changes

D Text looks cramped and hard to read

Too small line height makes lines overlap or look crowded, reducing readability.

Which unit is commonly used for font size in Figma?

A Pixels (px)

B Meters (m)

C Seconds (s)

D Degrees (°)

Pixels (px) are the standard unit for font size in digital design tools like Figma.

Explain why line height is important when designing text for reports or dashboards.

Think about how you feel when reading long paragraphs with tight or loose spacing.

Describe how you would set font size and line height in Figma for a dashboard title and body text.

Consider hierarchy and readability for different text elements.