Font selection and pairing in Figma - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to select a font family for your text in Figma.

Figma

text.fontName = { family: '[1]', style: 'Regular' }

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

ARoboto

BArial

CHelvetica

DTimes New Roman

Attempts:

3 left

💡 Hint

Common Mistakes

Using serif fonts like Times New Roman for UI text.

Leaving the font family empty or undefined.

The Roboto font is a popular, clean sans-serif font commonly used in UI design.

2fill in blank

medium

Complete the code to set the font style to italic in Figma.

Figma

text.fontName = { family: 'Roboto', style: '[1]' }

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

ABold

BItalic

CRegular

DLight

Attempts:

3 left

💡 Hint

Common Mistakes

Choosing 'Bold' instead of 'Italic' for slanted text.

Using 'Regular' which is normal style.

The Italic style slants the text, often used for emphasis or quotes.

3fill in blank

hard

Fix the error in the font pairing code to combine a serif and sans-serif font.

Figma

heading.fontName = { family: '[1]', style: 'Bold' }
body.fontName = { family: '[2]', style: 'Regular' }

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

AGeorgia

BComic Sans

CArial

DPapyrus

Attempts:

3 left

💡 Hint

Common Mistakes

Using two serif fonts or two sans-serif fonts together.

Choosing decorative fonts like Comic Sans or Papyrus for professional text.

Pairing Georgia (a serif font) for headings with Arial (a sans-serif font) for body text creates a balanced, readable design.

4fill in blank

hard

Fill both blanks to create a font pairing with contrast: a light sans-serif and a bold serif.

Figma

title.fontName = { family: '[1]', style: '[2]' }
paragraph.fontName = { family: 'Times New Roman', style: 'Bold' }

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

AOpen Sans

BLight

CBold

DCourier New

Attempts:

3 left

💡 Hint

Common Mistakes

Using a bold style for the sans-serif font here.

Choosing a monospace font like Courier New which doesn't pair well here.

Open Sans Light provides a clean, light sans-serif contrast to the bold serif of Times New Roman.

5fill in blank

hard

Fill all three blanks to set a font pairing with a serif heading, sans-serif body, and italic accent.

Figma

heading.fontName = { family: '[1]', style: 'Bold' }
body.fontName = { family: '[2]', style: 'Regular' }
caption.fontName = { family: '[3]', style: 'Italic' }

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

AMerriweather

BLato

CRoboto

DGeorgia

Attempts:

3 left

💡 Hint

Common Mistakes

Using the same font family for all text roles.

Choosing non-italic styles for captions that need emphasis.

Georgia Bold for headings, Lato Regular for body, and Roboto Italic for captions create a harmonious font pairing with clear hierarchy and emphasis.