Module 2 · Layout, hierarchy and type Lesson 5 of 15
Hierarchy and visual weight
Hierarchy is the order the eye reads things in: size, weight, colour and position. A page with no hierarchy is a page where nothing is important.
The concept
Hierarchy means a visitor knows what to read first, second and third without being told. You create it with size, weight, colour and position — a bold 28px heading, a 16px paragraph, a muted caption — and one element winning clearly, rather than three elements of similar importance fighting for attention.
Give every screen one primary action. A filled button in the theme's colour, with secondary actions as outline buttons and everything else as a link. When two things look equally clickable, the user hesitates, and hesitation is where conversions die.
h1 { font-size: 2rem; font-weight: 700; color: #111827; }
p { font-size: 1rem; line-height: 1.6; color: #374151; max-width: 65ch; }
.btn--primary { background: var(--brand); color: #fff; }
.btn--secondary { background: #fff; border: 1px solid #d1d5db; }
/* One primary action per screen.
Never signal importance with colour alone - pair it with size or weight. */Common mistakes
The mistake is using colour alone to show importance, which fails for anyone colour-blind and for anyone reading in bright sunlight. Pair every colour cue with size or weight, and keep paragraphs to about 60 to 75 characters a line — the reading eye loses its place in a full-width wall of text.
Worked example
A job card should lead with the role title, then company, then location — all three bold and the same size means the reader scans nothing.
Your practice task
Take a cluttered screen and give it one clear primary element, one secondary and one tertiary, without changing any words.
Do this before moving on. Reading a solution teaches the shape of it; typing it teaches you.
Key takeaway
Hierarchy means a visitor knows what to read first, second and third without being told.
Keep your place in this course
A free account saves which lessons you have finished and unlocks the certificate. The lesson itself stays free to read.
Create free account or sign inCourse complete
You finished every lesson.
Your certificate is ready, and the projects you built are the proof to attach to an application.
Almost there
15 lessons left of 15
Finish every lesson to unlock the certificate. Each one ends in a practice task — do them and the final project brief writes itself.