Font selection and pairing in Figma - Real Business Scenario

Scenario Mode

👤 Your Role: You are a UI/UX designer working on a business intelligence dashboard.

📋 Request: Your manager wants you to choose and pair fonts that improve readability and visual appeal for the dashboard reports.

📊 Data: You have access to a list of common fonts and their characteristics such as serif or sans-serif, readability scores, and usage examples.

🎯 Deliverable: Create a font style guide in Figma that shows the selected font pairs with examples of headings, subheadings, and body text for the dashboard.

Sample Data

Font Name	Type	Readability Score (1-10)	Usage Example
Roboto	Sans-serif	9	Dashboard labels and body text
Merriweather	Serif	8	Headings and titles
Open Sans	Sans-serif	9	Body text and tooltips
Lora	Serif	7	Subheadings and quotes
Montserrat	Sans-serif	8	Headings and buttons
Playfair Display	Serif	7	Titles and highlights
Source Sans Pro	Sans-serif	9	Body text and labels
Georgia	Serif	8	Headings and paragraphs

1

Step 1: Review the font list and select a sans-serif font with high readability for body text.

Choose 'Roboto' because it has a readability score of 9 and is suitable for dashboard labels and body text.

Expected Result

Roboto selected for body text.

2

Step 2: Select a serif font with good readability to pair with the body text font for headings.

Choose 'Merriweather' with a readability score of 8, suitable for headings and titles.

Expected Result

Merriweather selected for headings.

3

Step 3: Create a Figma text style for body text using Roboto, size 14px, weight regular.

In Figma, create a text style named 'Body Text' with font 'Roboto', size 14px, weight 400.

Expected Result

Body Text style created with Roboto 14px.

4

Step 4: Create a Figma text style for headings using Merriweather, size 24px, weight bold.

In Figma, create a text style named 'Heading' with font 'Merriweather', size 24px, weight 700.

Expected Result

Heading style created with Merriweather 24px bold.

5

Step 5: Add examples in Figma showing a dashboard title using the Heading style and body paragraphs using the Body Text style.

Insert text boxes with sample dashboard title and body text applying the created styles.

Expected Result

Visual example of font pairing displayed in Figma.

6

Step 6: Check color contrast and readability of the fonts on dashboard background colors.

Use Figma's contrast checker to ensure text colors meet accessibility standards (minimum 4.5:1 contrast ratio).

Expected Result

Font colors pass accessibility contrast requirements.

Final Result

Heading: Merriweather 24px Bold

↓

Body Text: Roboto 14px Regular

✓Using a serif font for headings and a sans-serif font for body text improves readability and visual hierarchy.

✓Roboto and Merriweather pair well because they balance modern and classic styles.

✓Font sizes and weights chosen ensure clear distinction between headings and body text.

✓Color contrast meets accessibility guidelines for all text elements.

Bonus Challenge

Add a third font style for dashboard subheadings that complements the existing pair and create a style guide section for it.

Show Hint

Consider using 'Lora' (Serif) or 'Montserrat' (Sans-serif) with medium size and weight for subheadings.