Visual communication element: scale

Name:

Date:

Class:

Quick Questions

Shade in the A or B circle for each question.

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

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

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

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

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

Match the Pairs

Draw a line connecting each item on the left to its match on the right.

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

Definitions

scale

Fill in the Blanks

Complete each line of code by filling in the missing parts.

h1 { _________: 36px; }

.logo { transform: _____(1.5); }

.icon { transform: scale(___); }

.title { font-size: ______; }

.main { width: 70%; } .side { _____: 30%; }

Spot the Error

Shade in the letter of the line that contains an error.

Question 1

A .title {

B font-size: 48px;

C transform: scale 1.5;

D }

Question 2

A main ← 10

B other ← 16

C if main > other then

D print "Main stands out"

Question 3

A img.logo {

B width: 200;

C height: auto;

D }

Question 4

A size ← 100

B shrink ← 0.5

C for i from 1 to 3

D size ← size + shrink

E print size

Question 5

A h1 {

B font-size: 0.8rem;

C }

D p {

E font-size: 1rem;

F }

Answer Key

Visual communication element: scale

Section A: Quick Questions

B — True

A — The total sales figure is the most important item

A — Enlarging the statistic so it is much bigger than the surrounding text

B — Reduce the caption so it is smaller than the main heading

A — False

Section B: 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.

Section C: Definitions

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.

Section D: Fill in the Blanks

h1 { font-size: 36px; }

.logo { transform: scale(1.5); }

.icon { transform: scale(0.5); }

.title { font-size: larger; }

.main { width: 70%; }
.side { width: 30%; }

Section E: Spot the Error

C — The scale factor must go inside brackets: transform: scale(1.5); enlarges the title to 1.5 times its size.

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.

B — A CSS size needs a unit. It should be width: 200px; so the logo is scaled to a set size.

D — Reducing scale means multiplying by a factor below 1. Adding shrink makes the size grow slightly. It should be size ← size * shrink.

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.