← VCE Software Development U3O2

UI design principle: 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.

Part of: VCE Software Development - U3O2 - Analysis and Design — Module 116, VCE Data Analytics - U3O2 - Analysis and Design — Module 132, QCE Digital Solutions Unit 1 — User Experiences and Interfaces — Module 51, QCE Digital Solutions Unit 3 — Interactions Between Users, Data and Digital Systems — Module 151

Understanding UI design principle: text formatting in VCE Software Development U3O2

What it does: The h1 rule sets a bigger size than the p rule, which creates a clear hierarchy. One rule applied to all h2 elements keeps every subheading looking the same, so users learn what each style means. A size hierarchy uses larger, bolder text for headings and smaller text for body copy, so users can see what is most important. Font choice affects readability. Simple fonts are easier to read in long passages, and decorative fonts are better kept for rare, short uses. Changing fonts and sizes randomly confuses users and makes the software look unprofessional. Consistency makes it easier to use.

Common mistakes: font-size needs a size value such as 32px. Bold belongs to font-weight. The heading size should be font-size: 32px;. A CSS property and its value are separated by a colon, not a semicolon. It should be font-family: Arial;.

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 UI design principle: text formatting to a class →

This module's key terms are also in a printable crossword (Modules 110–119) and word search (Modules 86–119).

Take this worksheet further — free with Cloodit

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

Learning
Duo
Which heading style best shows a size hierarchy on a screen?
Heading 24 pt bold, body text 12 pt regularHeading 12 pt regular, body text 12 pt regular
Matches
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.
Applying
Meanings
Term
text formatting
Meaning
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.
Practice
<style>
Testing
Gaps
font-weight: ;
Check Answer
Spots
1h1 {
2 font-size: bold;

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

The 'Clownfish' badge — Reef Rookie, 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 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 ✓
A size hierarchy uses larger, bolder text for headings and smaller text for body copy, so users can see what is most important.
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
Font choice affects readability. Simple fonts are easier to read in long passages, and decorative fonts are better kept for rare, short uses.
3. A form has all its section headings in 18 pt bold blue Arial. What does this show?
A. Consistent formatting ✓
B. Inconsistent formatting
Using the same font, size, weight and colour for the same type of content is consistent formatting. It helps users learn the pattern.
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
Changing fonts and sizes randomly confuses users and makes the software look unprofessional. Consistency makes it easier to use.
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 ✓
Size and weight signal importance. Users notice larger, bolder text first. It has no effect on file size.

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.

Key Term

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.

Fill in the Blanks

1. h1 { font-weight: bold; }
Hint: Type the value that makes heading text heavier so it stands out as important.
2. p { font-size: 16px; }
Hint: Type the CSS property that sets how large the body text appears.
3. body { font-family: Arial, sans-serif; }
Hint: Type the generic fallback font family for clean, easy-to-read screen text without decorative strokes.
4. h1 { font-size: 32px; } p { font-size: 16px; }
Hint: Type the unit that follows the numbers to measure text size in pixels, so the heading is larger than the body text.
5. .warning { color: red; font-weight: bold; }
Hint: Type the CSS property that sets the colour of text.

Spot the Error

Question 1
A h1 {
B font-size: bold;
C font-weight: bold;
D color: #1a1a1a;
E }
Line B — font-size needs a size value such as 32px. Bold belongs to font-weight. The heading size should be font-size: 32px;
Question 2
A body {
B font-family; Arial;
C font-size: 16px;
D color: #222222;
E }
Line B — A CSS property and its value are separated by a colon, not a semicolon. It should be font-family: Arial;
Question 3
A h1 { font-size: 32px; }
B h2 { font-size: 24px; }
C p { font-size: 40px; }
Line C — Body text is larger than the headings, which breaks the size hierarchy. Paragraph text should be smaller, such as 16px.
Question 4
A body {
B background: #ffffff;
C font-size: 16px;
D color: #fafafa;
E }
Line D — Near-white text on a white background is almost impossible to read. Use a dark colour such as #222222 for readable text.
Question 5
A h1 {
B font-family: Comic Sans MS;
C }
D h2 {
E font-family: Georgia;
F }
Line B — The h1 and h2 headings use different fonts, so the formatting is inconsistent. Both should use the same font, Georgia.

Student with a class code? Join your class →