← VCE Data Analytics U3O1

Visual hierarchy in a visualisation

Using size, position, colour and weight to show which element viewers should read first, so the key message stands out and the reading order is clear.

Part of: VCE Data Analytics - U3O1 - Data Analytics — Module 124

Understanding Visual hierarchy in a visualisation in VCE Data Analytics U3O1

What it does: The large h1 and small p create a clear size difference, which sets the order in which viewers read the content. A contrasting colour and heavier weight apply emphasis to a single element, so it draws attention first. Size is a main hierarchy tool. Bigger elements attract the eye before smaller ones. Readers usually scan from the top left. Placing the most important element there supports the reading order. Emphasis only works through contrast. If everything is emphasised, viewers cannot tell what to read first. Supporting details like data sources sit lower in the hierarchy. The headline finding should be the most prominent.

Common mistakes: The colon is missing between the property and its value. It should be color: #1a1a1a; so the dark, bold heading gets applied and stands out as the first thing read. A weight of 100 makes the key figure thin and weak, which works against the large size and bright colour. It should be font-weight: bold; so the main number stands out.

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 Visual hierarchy in a visualisation to a class →

This module's key terms are also in a printable crossword (Modules 94–128) and word search (Modules 94–148).

Take this worksheet further — free with Cloodit

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

Learning

Duo

A dashboard has one key message: sales fell 12% this quarter. Which choice shows good visual hierarchy?

Make the sales figure the largest text and place it at the top leftMake every number the same size so none is favoured

Matches

h1 { font-size: 12px; } p { font-size: 24px; }

↓

The title is smaller than the body text, so the hierarchy is upside down and viewers read the detail first

Applying

Meanings

Term

visual hierarchy

Meaning

Using size, position, colour and weight to show which element viewers should read first, so the key message stands out and the reading order is clear.

Practice

<style>

Testing

Gaps

h1 { : 36px; }

Check Answer

Spots

3 font-weight: bold;

4 color #1a1a1a;

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

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 dashboard has one key message: sales fell 12% this quarter. Which choice shows good visual hierarchy?

A. Make the sales figure the largest text and place it at the top left ✓

B. Make every number the same size so none is favoured

Visual hierarchy uses size and position so viewers see the key message first. Equal sizes give no clear starting point.

2. Which statement about size in visual hierarchy is correct?

A. Size has no effect on which element viewers read first

B. Larger elements are noticed first, so the main title or key figure should be bigger ✓

Size is a main hierarchy tool. Bigger elements attract the eye before smaller ones.

3. In a left-to-right language like English, where do viewers usually begin reading a visualisation?

A. Top left ✓

B. Bottom right

Readers usually scan from the top left. Placing the most important element there supports the reading order.

4. A poster uses one bold red number among grey text to show the key finding. What is this an example of?

A. Poor hierarchy because the elements differ

B. Emphasis using colour and weight ✓

Emphasis makes one element stand out. A bold, contrasting colour draws attention to the key finding.

5. Which design makes the reading order clearest?

A. Title first, then the main chart, then the supporting notes in smaller text ✓

B. Place the title, chart and notes at random positions in similar sizes

A clear reading order guides viewers from the most important element to the least important using size and position.

Match the Pairs

font-size: 36px; font-weight: bold; → Makes the main title larger and heavier so it is read first

<h1>Sales Up 12%</h1> <p>Term 2 results</p> → Places the key message above the supporting detail so the reading order is clear

Size: the most important element is made the biggest so the eye goes to it first → h1 { font-size: 40px; } p { font-size: 14px; }

Emphasis: one bold accent colour makes the key figure stand out from the muted rest → .key { color: red; font-weight: bold; }

h1 { font-size: 12px; } p { font-size: 24px; } → The title is smaller than the body text, so the hierarchy is upside down and viewers read the detail first

.a, .b, .c, .d { color: red; font-weight: bold; } → Every element has the same strong emphasis, so nothing stands out and the reading order is unclear

Key Term

visual hierarchy

Using size, position, colour and weight to show which element viewers should read first, so the key message stands out and the reading order is clear.

Fill in the Blanks

1. h1 { font-size: 36px; }

Hint: Type the CSS property that makes the main title larger than other text.

2. .key-number { font-weight: bold; }

Hint: Type the weight value that makes the key number look heavier than the text around it.

3. .highlight { color: #D62728; }

Hint: Type the CSS property that sets text colour so a key figure stands out.

4. <h1>Sales rose 20% this term</h1>

Hint: Type the tag name for the top-level, most important heading.

5. .headline { order: 1; }

Hint: Type the number that makes this element come first in the reading order.

Spot the Error

Question 1

A h1 {

B font-size: 32px;

C font-weight: bold;

D color #1a1a1a;

E }

Line D — The colon is missing between the property and its value. It should be color: #1a1a1a; so the dark, bold heading gets applied and stands out as the first thing read.

Question 2

A .kpi {

B font-size: 48px;

C font-weight: 100;

D color: #d62728;

E }

Line C — A weight of 100 makes the key figure thin and weak, which works against the large size and bright colour. It should be font-weight: bold; so the main number stands out.

Question 3

A .title { font-size: 10px; }

B .note { font-size: 12px; }

C .body { font-size: 18px; }

Line A — The title is now smaller than the body text and the note, so it no longer shows what to read first. The title should be the largest size, such as 36px.

Question 4

A title.position = bottom-right

B chart.position = centre

C source.position = bottom

Line A — Viewers usually start reading at the top-left. Putting the title at the bottom-right breaks the reading order. It should be title.position = top-left.

Question 5

A SET headline size TO 32

B SET subtitle size TO 40

C SET footnote size TO 12

Line B — The subtitle is set larger than the headline, so it competes with the main message. Size should step down: headline 32, subtitle 20 and footnote 12.

Student with a class code? Join your class →