Choosing fonts for a visualisation

Name:

Date:

Class:

Quick Questions

Shade in the A or B circle for each question.

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

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

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

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

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

Match the Pairs

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

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

Definitions

font hierarchy

Fill in the Blanks

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

h1 { _________: 32px; }

p { font-size: 16px; font-weight: ______; }

strong { font-weight: ____; }

body { font-family: Arial, __________; }

h1 { font-size: 32px; } __ { font-size: 22px; } p { font-size: 16px; }

Spot the Error

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

Question 1

A h1 { font-size: 32px; }

B h2 { font-size: 24px; }

C p { font-size: 16px; }

D .caption { font-size: 30px; }

Question 2

A h1 { font-family: Arial; }

B h2 { font-family: Arial; }

C p { font-family: Papyrus; }

Question 3

A h1 { font-weight: bold; }

B p { font-weight: bold; }

C .key { font-weight: bold; }

Question 4

A h1 { font-size: 32px; }

B h2 { font-size: 40px; }

C p { font-size: 16px; }

Question 5

A h1 { font-size: 14px; }

B p { font-size: 16px; }

C .cap { font-size: 12px; }

Answer Key

Choosing fonts for a visualisation

Section A: Quick Questions

A — Two fonts used consistently across the whole poster

A — Title 32 pt, heading 20 pt, body 12 pt, caption 9 pt

B — A plain, clear typeface such as Arial or Calibri

B — To emphasise a key figure or important heading

A — The title should be the largest text so it is read first

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

Section C: Definitions

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.

Section D: Fill in the Blanks

h1 { font-size: 32px; }

p { font-size: 16px; font-weight: normal; }

strong { font-weight: bold; }

body { font-family: Arial, sans-serif; }

h1 { font-size: 32px; }
h2 { font-size: 22px; }
p { font-size: 16px; }

Section E: Spot the Error

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.

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.

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.

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.

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.