Why typography drives readability in Figma - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to set the font size for better readability.

Figma

text.fontSize = [1]

Drag options to blanks, or click blank then click option'

A12

B5

C8

D16

Attempts:

3 left

💡 Hint

Common Mistakes

Choosing font sizes that are too small reduces readability.

Setting the font size to 16 pixels improves readability for most users.

2fill in blank

medium

Complete the code to set the font weight for clear text display.

Figma

text.fontWeight = '[1]'

Drag options to blanks, or click blank then click option'

Alight

Bnormal

Cthin

Dhairline

Attempts:

3 left

💡 Hint

Common Mistakes

Using very thin font weights makes text hard to read.

Using 'normal' font weight ensures text is neither too thin nor too bold, aiding readability.

3fill in blank

hard

Fix the error in the code to set the line height for better readability.

Figma

text.lineHeight = [1]

Drag options to blanks, or click blank then click option'

A1.5

B'1.2em'

C'150%'

D15

Attempts:

3 left

💡 Hint

Common Mistakes

Using strings instead of numbers for line height causes errors.

Line height should be a number without quotes for proper spacing in Figma.

4fill in blank

hard

Fill both blanks to set font family and letter spacing for readability.

Figma

text.fontFamily = '[1]'
text.letterSpacing = [2]

Drag options to blanks, or click blank then click option'

ARoboto

BArial

C0

D0.05

Attempts:

3 left

💡 Hint

Common Mistakes

Using fonts that are hard to read or zero letter spacing.

Arial is a clean font and a small positive letter spacing (0.05) improves readability.

5fill in blank

hard

Fill all three blanks to set font style, text alignment, and color for readability.

Figma

text.fontStyle = '[1]'
text.textAlign = '[2]'
text.fill = [3]

Drag options to blanks, or click blank then click option'

Aitalic

Bnormal

Cleft

Dcenter

E#000000

F#888888

Attempts:

3 left

💡 Hint

Common Mistakes

Using italic style or center alignment reduces readability.

Normal font style, left alignment, and black color (#000000) maximize readability.