← VCE Spreadsheets, SQL & Visualisation

Choosing fonts for a visualisation

Using only two or three fonts, with size and weight showing importance from title to heading to body to caption, so a visualisation is easy to read.

Part of: VCE Applied Computing - U1O1 - Data analysis — Module 84, VCE Data Analytics - U3O1 - Data Analytics — Module 121, VCE Data Analytics - U4O1 - Development and Evaluation — Module 70, QCE Digital Solutions Unit 3 — Interactions Between Users, Data and Digital Systems — Module 142

Understanding Choosing fonts for a visualisation in VCE Spreadsheets, SQL & Visualisation

What it does: One simple sans-serif font family keeps the body text readable and limits the number of fonts. Each level is smaller than the one above it, so size shows the order of importance. Stick to two or three fonts at most. Too many fonts look messy and make a visualisation harder to read. Bold works only when it is used sparingly. If everything is bold, nothing stands out. The title is at the top of the hierarchy, so it uses the biggest size (and often bold) to show it is the most important. Captions and source notes are the least important in the hierarchy, so they are the smallest. They should still be big enough to read.

Common mistakes: The caption is bigger than the body text, which breaks the size order. Captions are the least important text, so it should be smaller than the body, e.g. 12px. Papyrus is a decorative typeface that is hard to read in body text. Use a clear, readable typeface such as Arial that matches the headings.

Class: _____________________  ·  Name: _____________________  ·  Date: _________

Free printable worksheet with full answer key — or add this module to a class and your students practise it interactively.

🖨 Print worksheet + answer key Add Choosing fonts for a visualisation to a class →

This module's key terms are also in a printable crossword (Modules 71–86) and word search (Modules 55–86).

Take this worksheet further — free with Cloodit

Each concept is reinforced from every angle — learned, then applied, then tested.

Learning
Duo
A student is designing a poster about school canteen sales. Which font choice is better?
Two fonts used consistently across the whole posterA different font for every text box to make it look fun
Matches
h1 {font-size: 12px;} p {font-size: 24px;}
↓
The title is smaller than the body text, so the hierarchy is upside down. Make the title the largest text.
Applying
Meanings
Term
font hierarchy
Meaning
Using only two or three fonts, with size and weight showing importance from title to heading to body to caption, so a visualisation is easy to read.
Practice
<style>
Testing
Gaps
h1 { : 32px; }
Check Answer
Spots
3p { font-size: 16px; }
4.caption { font-size: 30px; }

Cloodit turns curriculum-aligned coding content into journeys students work through one biome at a time.

The 'African Wild Dog' badge — Savannah Streak, one of Cloodit's 106 collectible badges
Students earn collectable badges

Over 100 of them, across seven natural biomes.

Study Buddy
Students build a real study resource

Turns their work into revision material ready for Flash Cards and Exam study.

Diamond Dash — one of Cloodit's live, competitive Sprint games
Students lock in with Sprints

Live, competitive practice for the start of the lesson or a teacher-led lesson finisher.

A Cloodit certificate of achievement, ready to personalise and print
Custom printable certificates

Honour your top performers, or encourage a student who's trying hard — ready to print in seconds.

Add to class →

Quick Questions

1. A student is designing a poster about school canteen sales. Which font choice is better?
A. Two fonts used consistently across the whole poster ✓
B. A different font for every text box to make it look fun
Stick to two or three fonts at most. Too many fonts look messy and make a visualisation harder to read.
2. Which size order shows a clear font hierarchy?
A. Title 32 pt, heading 20 pt, body 12 pt, caption 9 pt ✓
B. Title 12 pt, heading 12 pt, body 12 pt, caption 12 pt
Size shows importance. The title is largest and the caption is smallest. If every size is the same, the viewer cannot tell what to read first.
3. Which typeface is better for the body text of an infographic?
A. A fancy script typeface with lots of curls
B. A plain, clear typeface such as Arial or Calibri ✓
Readable typefaces keep body text easy to scan. Decorative script fonts are hard to read at small sizes.
4. When should you use bold text in a visualisation?
A. On every word so that everything stands out
B. To emphasise a key figure or important heading ✓
Bold works only when it is used sparingly. If everything is bold, nothing stands out.
5. Which statement about the title is correct?
A. The title should be the largest text so it is read first ✓
B. The title should be the smallest text so it does not distract
The title is at the top of the hierarchy, so it uses the biggest size (and often bold) to show it is the most important.

Match the Pairs

font-size: 32px; → Sets a large size for the title, the most important text, so it stands out first
font-weight: bold; → Makes key words heavier so they stand out from the body text, used sparingly for emphasis
Use a clear, readable typeface for body text and keep to only two or three fonts in total → font-family: Arial, sans-serif;
Text sizes step down in order of importance: title, then heading, then body → h1 {font-size: 32px;} h2 {font-size: 20px;} p {font-size: 14px;}
h1 {font-size: 12px;} p {font-size: 24px;} → The title is smaller than the body text, so the hierarchy is upside down. Make the title the largest text.
font-family: Impact, Papyrus, Comic Sans MS, Courier, Times; → Five different fonts make the visualisation messy and hard to read. Limit it to two or three readable fonts.

Key Term

font hierarchy
Using only two or three fonts, with size and weight showing importance from title to heading to body to caption, so a visualisation is easy to read.

Fill in the Blanks

1. h1 { font-size: 32px; }
Hint: Type the CSS property that sets how big the title text is.
2. p { font-size: 16px; font-weight: normal; }
Hint: Type the weight keyword for regular body text that is not bold or heavy.
3. strong { font-weight: bold; }
Hint: Type the weight keyword that makes key words stand out for emphasis.
4. body { font-family: Arial, sans-serif; }
Hint: Type the generic font family for a clean, easy-to-read typeface without decorative strokes.
5. h1 { font-size: 32px; } h2 { font-size: 22px; } p { font-size: 16px; }
Hint: Type the heading tag that sits one level below the title in the size order.

Spot the Error

Question 1
A h1 { font-size: 32px; }
B h2 { font-size: 24px; }
C p { font-size: 16px; }
D .caption { font-size: 30px; }
Line D — The caption is bigger than the body text, which breaks the size order. Captions are the least important text, so it should be smaller than the body, e.g. 12px.
Question 2
A h1 { font-family: Arial; }
B h2 { font-family: Arial; }
C p { font-family: Papyrus; }
Line C — Papyrus is a decorative typeface that is hard to read in body text. Use a clear, readable typeface such as Arial that matches the headings.
Question 3
A h1 { font-weight: bold; }
B p { font-weight: bold; }
C .key { font-weight: bold; }
Line B — If all the body text is bold, nothing stands out. Body text should be normal weight so bold can be saved for key words, e.g. font-weight: normal.
Question 4
A h1 { font-size: 32px; }
B h2 { font-size: 40px; }
C p { font-size: 16px; }
Line B — The heading is larger than the title, which reverses the hierarchy. The title should be the largest, so h2 should be smaller than h1, e.g. 24px.
Question 5
A h1 { font-size: 14px; }
B p { font-size: 16px; }
C .cap { font-size: 12px; }
Line A — The title is smaller than the body text, so it does not look like the most important item. The title should be the largest size, e.g. 36px.

Student with a class code? Join your class →