Visual hierarchy: what do I look at first?
Every page tells the eye where to go first, whether you planned it or not. Learn the four levers that set that order and a ten-second test to check your own work.
THE MAIN IDEA
Visual hierarchy
Visual hierarchy is the order in which the eye visits the things on a page. People don't read a poster from the first word to the last. They glance, land on whatever is loudest, and decide in a second or two whether to keep going. Every page has a hierarchy. The only question is whether you chose it.
A concert poster where the band's photo credit is as big as the date. People walk past, see a grey block of same-size text, and never find out it's this Friday.
The same workshop poster, twice
Version A: flat
Eight lines, all centred, all 20pt, all bold. Workshop name, teacher, date, place, price, phone, logo line, 'places limited'. Nothing is wrong, and nothing is first. Your eye slides over it.
Version B: ranked
'Learn Pottery in One Day' fills the top third at 60pt. Under it, date and place at 28pt. Everything else sits at the bottom at 16pt in grey. Same words. Now you know what it is in one second and where to go in three.
Check yourself
Negar's bake-sale poster has every line in 18pt bold so that 'nothing gets missed'. Friends say they didn't notice the date. What is the real problem?
- The font is too plain, and a more decorative one would make the poster feel special enough to read
- Every line has the same strength, so the eye has no first stop
- There is too little on the poster, so the date has nothing around it to give it weight
- Bold text is harder to read, so 18pt bold hides the date
Show the answer
Every line has the same strength, so the eye has no first stop
Yes. When every line shouts at the same volume, none of them is heard. The date needs to be clearly stronger than the lines around it.
The four levers
- Size. The strongest lever. Recipe: make the title 2–3× the body size. Body 12pt, title 24–36pt. On a slide: body 24pt, title 48pt or more.
- Weight. Bold against regular. Use bold for a few words, not for paragraphs.
- Colour. One strong colour on a calm page pulls the eye. Grey pushes things back.
- Position. The top, and the side where reading starts, get seen first. Things tucked at the bottom edge are seen last.
LEVEL 1 (one thing) 48pt bold dark
Learn Pottery in One Day
LEVEL 2 (two or three) 24pt regular dark
Friday 14 June · Studio Gel
LEVEL 3 (everything else) 14pt regular grey
All materials included. Call 0912 000 0000.Eye path: name of the event -> when and where -> details, only if interested.Three levels are enough for almost anything you'll make. If you need a fourth, you probably have too much on the page.
Check yourself
You're making a poster for a free film night. Which level does each item belong to?
- "Free Film Night"
- Thursday, 7pm
- University hall, Building 2
- Organised by the student film club
- Bring your own snacks
Show the answer
Level 1: seen first: "Free Film Night"
Level 2: seen next: Thursday, 7pm, University hall, Building 2
Level 3: for the interested: Organised by the student film club, Bring your own snacks
The squint test
- Step back or shrink it
Hold the page at arm's length, or zoom out until you can't read the words.
- Squint until it blurs
Half-close your eyes. The text turns into grey blobs. Only size, weight, colour and position are left.
- Name what you still see
What is the darkest, biggest blob? That is your real level 1, whatever you intended.
- Compare with what you wanted
If the loudest blob is the logo or a decorative line and not your message, turn that down and turn the message up. Then squint again.
Check yourself
Negar's poster has six bold red lines. Turning four of them into plain grey text would make the other two stand out more, even though nothing about those two changed.
Show the answer
True
True, and it is the whole trick. Emphasis is relative: a line is strong only next to something quieter. Turn four down and the two you kept become level 1 without being touched. Adding more bold would only flatten the poster again.
Check yourself
Match each design move to the lever it uses
Show the answer
- The headline is three times taller than the body text → Size
- A name in heavy bold, the job title under it in regular → Weight
- One orange price on an otherwise grey menu → Colour
- The offer sits at the top, the legal note at the bottom edge → Position
Check yourself
Omid is laying out his CV. Which choice gives it the best hierarchy?
- His name at 28pt, section headings at 14pt bold, body text at 11pt
- The words 'Curriculum Vitae' at 36pt on top, his name at 12pt under it
- Everything at 12pt so it looks neat and serious
- His phone number in red 24pt so recruiters can't miss it
Show the answer
His name at 28pt, section headings at 14pt bold, body text at 11pt
Right. The recruiter should see who this is, then find sections fast, then read details. Three clear levels, with the name about 2.5× the body.
Lesson recap
- Visual hierarchy is the order the eye visits things. Every page has one; your job is to choose it.
- Four levers set it: size, weight, colour and position. Size is the strongest: title 2–3× the body.
- Three levels are enough: one level-1 item, a few level-2 items, the rest level 3.
- Squint at your work. The loudest blob should be your main message.
- In Persian, the top right is seen first; emphasise with size and weight, not letter-spacing.