UI design principle: text formatting

Name:

Date:

Class:

Quick Questions

Shade in the A or B circle for each question.

1. Which heading style best shows a size hierarchy on a screen?

A Heading 12 pt regular, body text 12 pt regular

B Heading 24 pt bold, body text 12 pt regular

2. Which choice is better for the body text of a long report screen?

A A clear, simple font such as Arial or Calibri

B A decorative script font with heavy swirls

3. A form has all its section headings in 18 pt bold blue Arial. What does this show?

A Consistent formatting

B Inconsistent formatting

4. Which interface uses text formatting poorly?

A Each page uses a different font and heading size

B Every page uses the same font and heading size

5. Why would a designer make a screen title bold and larger than the other text?

A To make the file size smaller

B To show that it is more important

Match the Pairs

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

Left column		Right column
1font-size: 24px; font-weight: bold;		AMakes a heading larger and bolder than body text so it stands out as more important
2font-family: Arial, sans-serif;		Bh2 { font-family: Arial; font-size: 20px; color: #003366; }
3Size hierarchy: headings are larger than body text so users can see what matters most		Ch1 { font-size: 32px; } p { font-size: 16px; }
4Consistent formatting: every heading in the interface uses the same font, size and colour		DSets a clear, readable font choice that can be applied to all text in the interface
5h1 { font-size: 12px; } p { font-size: 18px; }		EThe heading is smaller than the body text, so the size hierarchy is reversed and the heading does not show importance.
6p { color: #FFFF99; } body { background: white; }		FPale yellow text on a white background has poor contrast, so the text is hard to read.

Definitions

text formatting

Fill in the Blanks

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

h1 { font-weight: ____; }

p { _________: 16px; }

body { font-family: Arial, __________; }

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

.warning { _____: red; font-weight: bold; }

Spot the Error

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

Question 1

A h1 {

B font-size: bold;

C font-weight: bold;

D color: #1a1a1a;

E }

Question 2

A body {

B font-family; Arial;

C font-size: 16px;

D color: #222222;

E }

Question 3

A h1 { font-size: 32px; }

B h2 { font-size: 24px; }

C p { font-size: 40px; }

Question 4

A body {

B background: #ffffff;

C font-size: 16px;

D color: #fafafa;

E }

Question 5

A h1 {

B font-family: Comic Sans MS;

C }

D h2 {

E font-family: Georgia;

F }

Answer Key

UI design principle: text formatting

Section A: Quick Questions

B — Heading 24 pt bold, body text 12 pt regular

A — A clear, simple font such as Arial or Calibri

A — Consistent formatting

A — Each page uses a different font and heading size

B — To show that it is more important

Section B: Match the Pairs

font-size: 24px; font-weight: bold; → Makes a heading larger and bolder than body text so it stands out as more important

font-family: Arial, sans-serif; → Sets a clear, readable font choice that can be applied to all text in the interface

Size hierarchy: headings are larger than body text so users can see what matters most → h1 { font-size: 32px; } p { font-size: 16px; }

Consistent formatting: every heading in the interface uses the same font, size and colour → h2 { font-family: Arial; font-size: 20px; color: #003366; }

h1 { font-size: 12px; } p { font-size: 18px; } → The heading is smaller than the body text, so the size hierarchy is reversed and the heading does not show importance.

p { color: #FFFF99; } body { background: white; } → Pale yellow text on a white background has poor contrast, so the text is hard to read.

Section C: Definitions

text formatting — Using font, size, weight and colour consistently so text is easy to read and shows importance, such as larger bold headings above smaller body text.

Section D: Fill in the Blanks

h1 {
  font-weight: bold;
}

p {
  font-size: 16px;
}

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

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

.warning {
  color: red;
  font-weight: bold;
}

Section E: Spot the Error

B — font-size needs a size value such as 32px. Bold belongs to font-weight. The heading size should be font-size: 32px;

B — A CSS property and its value are separated by a colon, not a semicolon. It should be font-family: Arial;

C — Body text is larger than the headings, which breaks the size hierarchy. Paragraph text should be smaller, such as 16px.

D — Near-white text on a white background is almost impossible to read. Use a dark colour such as #222222 for readable text.

B — The h1 and h2 headings use different fonts, so the formatting is inconsistent. Both should use the same font, Georgia.