← QCE Digital Solutions Unit 2

Visual communication element: proportion

The relationship in size between the parts of a design and the whole, such as how large one element is compared with the others around it.

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

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

What it does: The heading is three times the size of the paragraph text, so the proportion between these elements makes the title stand out. A percentage width sizes the image relative to its container, so it keeps the same share of the whole design on any screen. Proportion is about how big each element is compared with the other elements and the whole design. Relative size shows importance. An oversized logo pulls attention away from the data. Larger elements are read as more important, so relative size creates emphasis. Proportion is relative. A 100 px image can look large in one layout and small in another.

Common mistakes: The small text is now bigger than the heading, so the relative sizes no longer match their importance. Small text should be smaller than body text, for example 12px. A sidebar at 80% dominates the page and, with the 75% main area, adds up to more than the whole. It should be a small part of the whole, such as 25%.

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: proportion 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
Which statement best describes proportion in a visual design?
The relationship in size between the parts of a design and the wholeThe number of colours used in a design
Matches
h1 { font-size: 12px; } p { font-size: 30px; }
↓
The heading is smaller than the body text, so the proportions are reversed and the important element looks least important.
Applying
Meanings
Term
proportion
Meaning
The relationship in size between the parts of a design and the whole, such as how large one element is compared with the others around it.
Practice
<style>
Testing
Gaps
.sidebar { : 25%; }
Check Answer
Spots
2p { font-size: 16px; }
3small { font-size: 40px; }

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

The 'Thorny Devil' badge — Detail Master, 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. Which statement best describes proportion in a visual design?
A. The relationship in size between the parts of a design and the whole ✓
B. The number of colours used in a design
Proportion is about how big each element is compared with the other elements and the whole design.
2. A dashboard shows a tiny chart and a huge logo. What is the proportion problem?
A. The logo is too large relative to the chart, which is the important data ✓
B. The chart uses too many colours
Relative size shows importance. An oversized logo pulls attention away from the data.
3. Which choice uses proportion to show that a heading is more important than body text?
A. Make the heading the same size as the body text
B. Make the heading much larger than the body text ✓
Larger elements are read as more important, so relative size creates emphasis.
4. True or false: Proportion only depends on the exact pixel size of one element on its own.
A. True: only one element's pixel size matters
B. False: it depends on size compared with other elements and the whole ✓
Proportion is relative. A 100 px image can look large in one layout and small in another.
5. A student enlarges a photo on a poster so it is much bigger than the title and the data. Which element has been changed?
A. Proportion (relative size of the elements) ✓
B. Data validation
Changing how big one element is compared with the others changes the proportion of the design.

Match the Pairs

proportion → The relationship in size between the parts of a design and the whole
width: 70%; (main chart) and width: 30%; (legend) → The chart is given a larger share of the layout than the legend, so it looks more important
A title that is much larger than the body text shows a strong difference in proportion → h1 { font-size: 48px; } p { font-size: 16px; }
Keeping an image in proportion to the page by sizing it as a share of the whole → img { width: 25%; }
h1 { font-size: 12px; } p { font-size: 30px; } → The heading is smaller than the body text, so the proportions are reversed and the important element looks least important.
#logo { width: 90%; } #chart { width: 10%; } → The logo takes up almost the whole width while the main chart is tiny, so the proportions do not match what matters most.

Key Term

proportion
The relationship in size between the parts of a design and the whole, such as how large one element is compared with the others around it.

Fill in the Blanks

1. .sidebar { width: 25%; }
Hint: Type the CSS property that sets how wide the element is compared with the page.
2. .main { width: 75%; }
Hint: Type the unit symbol that sizes an element relative to its parent, so it stays in proportion to the whole.
3. h1 { font-size: 2em; }
Hint: Type the relative unit that makes the heading twice the size of the surrounding text.
4. .icon { width: 5%; height: auto; }
Hint: Type the property that scales automatically so the icon keeps its original proportions.
5. .card { aspect-ratio: 16 / 9; }
Hint: Type the CSS property that fixes the proportion between an element's width and its vertical size.

Spot the Error

Question 1
A h1 { font-size: 32px; }
B p { font-size: 16px; }
C small { font-size: 40px; }
Line C — The small text is now bigger than the heading, so the relative sizes no longer match their importance. Small text should be smaller than body text, for example 12px.
Question 2
A .page { width: 100%; }
B .sidebar { width: 80%; }
C .main { width: 75%; }
Line B — A sidebar at 80% dominates the page and, with the 75% main area, adds up to more than the whole. It should be a small part of the whole, such as 25%.
Question 3
A .logo { width: 120px; }
B .banner { width: 60px; }
C .icon { width: 24px; }
Line B — The banner is meant to be the largest element, but 60px makes it smaller than the logo. Its size should be much larger, such as 600px, to keep the proportions right.
Question 4
A .hero {
B height: 500vh;
C width: 100%;
D }
Line B — 500vh makes the hero section five times taller than the screen, so it overwhelms the page. A proportion of the screen such as 50vh keeps it in balance.
Question 5
A h1 { font-size: 0.5em; }
B h2 { font-size: 1.5em; }
C p { font-size: 1em; }
Line A — The main heading is now smaller than the paragraph text, so the relative sizes are wrong. The h1 should be the largest, for example 2em.

Student with a class code? Join your class →