← QCE Digital Solutions Unit 2

Visual communication element: scale

The overall size of an element compared with a reference, such as other elements or the page. Enlarging or reducing it shows importance, so bigger elements draw the eye first.

Part of: QCE Digital Solutions Unit 2 — Data-Driven Problems and Solution Requirements — Module 130

Understanding Visual communication element: scale in QCE Digital Solutions Unit 2

What it does: The heading is much bigger than the paragraph text, so the size difference between the two shows scale. Making the key figure very large compared with the rest of the dashboard gives it emphasis by size. Bigger elements draw the eye first, so enlarging the total sales figure signals that it matters most. Reducing scale lowers an element's importance, so the viewer reads the larger heading first. Size sets the order viewers look at things. The photo's large scale makes it the focal point, not the type of content. Scale is about size. Colour is a different visual communication element.

Common mistakes: The scale factor must go inside brackets: transform: scale(1.5); enlarges the title to 1.5 times its size. The main element must be bigger than the other element to be emphasised. With a value of 10 it is smaller, so the condition fails. It should be main ← 48.

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 communication element: scale to a class →

This module's key terms are also in a printable crossword (Modules 122–139) and word search (Modules 2–139).

Take this worksheet further — free with Cloodit

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

Learning
Duo
Scale in visual communication is the overall size of an element compared with a reference, such as other elements or the page.
FalseTrue
Matches
h1 { font-size: 12px; } p { font-size: 18px; }
↓
The title is smaller than the body text, so scale shows the wrong thing as important and the eye goes to the paragraph first.
Applying
Meanings
Term
scale
Meaning
The overall size of an element compared with a reference, such as other elements or the page. Enlarging or reducing it shows importance, so bigger elements draw the eye first.
Practice
<style>
Testing
Gaps
h1 { : 36px; }
Check Answer
Spots
2 font-size: 48px;
3 transform: scale 1.5;

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

The 'Armadillo' badge — Shield Bearer, 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. Scale in visual communication is the overall size of an element compared with a reference, such as other elements or the page.
A. False
B. True ✓
Scale compares the size of an element with something else, like other elements or the page, so it is relative rather than absolute.
2. A dashboard shows the total sales figure in a very large font and the notes in a small font. What does this use of scale tell the viewer?
A. The total sales figure is the most important item ✓
B. The notes are the most important item
Bigger elements draw the eye first, so enlarging the total sales figure signals that it matters most.
3. Which change uses scale to emphasise a key statistic in an infographic?
A. Enlarging the statistic so it is much bigger than the surrounding text ✓
B. Changing the statistic to a different file format
Emphasis by size means enlarging the important element. File format has nothing to do with how big an element looks.
4. A designer wants a supporting caption to stay in the background. Which scale choice fits?
A. Enlarge the caption so it is bigger than the main heading
B. Reduce the caption so it is smaller than the main heading ✓
Reducing scale lowers an element's importance, so the viewer reads the larger heading first.
5. If every element on a page is enlarged by the same amount, the scale differences between them still show which is most important.
A. False ✓
B. True
Scale works by comparison. If everything grows equally, no element stands out and importance is no longer shown.

Match the Pairs

font-size: 48px; → Enlarges the heading so it is much bigger than the body text, showing it is the most important element
width: 20%; → Reduces a logo to a small part of the page width so it does not compete with the main chart
Scale compares an element's size with a reference such as other elements or the page → h1 { font-size: 36px; } p { font-size: 14px; }
Emphasis by size: the biggest element draws the eye first and signals importance → .key-figure { font-size: 72px; }
h1 { font-size: 12px; } p { font-size: 18px; } → The title is smaller than the body text, so scale shows the wrong thing as important and the eye goes to the paragraph first.
.note { font-size: 60px; } .total { font-size: 10px; } → A minor note is enlarged and the key total is reduced, so scale gives emphasis to the least important data.

Key Term

scale
The overall size of an element compared with a reference, such as other elements or the page. Enlarging or reducing it shows importance, so bigger elements draw the eye first.

Fill in the Blanks

1. h1 { font-size: 36px; }
Hint: Type the CSS property that sets how large text appears, so a heading can be scaled up to show importance.
2. .logo { transform: scale(1.5); }
Hint: Type the CSS function that enlarges or reduces an element relative to its original size.
3. .icon { transform: scale(0.5); }
Hint: Type the scale factor that reduces the element to half of its original size.
4. .title { font-size: larger; }
Hint: Type the keyword that makes text bigger than its parent, giving it more emphasis.
5. .main { width: 70%; } .side { width: 30%; }
Hint: Type the property that sets element size. The smaller side panel shows lower importance than the main area.

Spot the Error

Question 1
A .title {
B font-size: 48px;
C transform: scale 1.5;
D }
Line C — The scale factor must go inside brackets: transform: scale(1.5); enlarges the title to 1.5 times its size.
Question 2
A main ← 10
B other ← 16
C if main > other then
D print "Main stands out"
Line A — The main element must be bigger than the other element to be emphasised. With a value of 10 it is smaller, so the condition fails. It should be main ← 48.
Question 3
A img.logo {
B width: 200;
C height: auto;
D }
Line B — A CSS size needs a unit. It should be width: 200px; so the logo is scaled to a set size.
Question 4
A size ← 100
B shrink ← 0.5
C for i from 1 to 3
D size ← size + shrink
E print size
Line D — Reducing scale means multiplying by a factor below 1. Adding shrink makes the size grow slightly. It should be size ← size * shrink.
Question 5
A h1 {
B font-size: 0.8rem;
C }
D p {
E font-size: 1rem;
F }
Line B — The heading is more important than the body text, so it must be larger. At 0.8rem it is smaller than the 1rem paragraph. It should be 3rem.

Student with a class code? Join your class →