Contrast: make different things really different
Hierarchy runs on contrast, and timid contrast looks like a mistake. Learn the four kinds of contrast and how big a difference has to be before it looks intended.
THE MAIN IDEA
Different should look different
In the last lesson you ranked things into levels. Contrast is what makes those levels visible: a clear difference between two things so the eye can tell them apart at a glance. The rule has two halves. If two things do different jobs, make them obviously different. If they do the same job, make them look the same.
On a price list, the product names all look alike, the prices all look alike, and a name never looks like a price. You can find any price in a second without reading everything.
One report page, two headings
Timid
Body text is 12pt regular. The heading is 13pt in a slightly darker grey. You have to look twice to be sure it's a heading. Some readers wonder if the printer slipped.
Confident
Body text is 12pt regular. The heading is 24pt bold with extra space above it. Nobody wonders. Flipping through ten pages, you can spot every section start.
Check yourself
- Heading 13pt, body 12pt: readers ask whether the sizes are a typo.
- Heading 24pt, body 12pt: readers see a heading instantly.
What rule explains the difference?
- Bigger text is always better
- A difference has to be large enough to look intentional
- Headings must be exactly 24pt
- Body text should be as small as possible
Show the answer
A difference has to be large enough to look intentional
Exactly. A small difference reads as an accident. A big one reads as a decision.
Four kinds of contrast, with a recipe for each
- Size. Jump by at least 1.5×, better 2×. 12 next to 14 is timid; 12 next to 24 is clear.
- Weight. Skip a step: regular against bold, not regular against medium. Thin against heavy is stronger still.
- Colour and lightness. Dark on light or light on dark. Near-black text beside mid-grey text is a clear pair; two similar greys are not.
- Shape. A round photo among square ones, a filled button beside an outlined one, a serif title over sans-serif body. The shapes must be clearly unlike.
Timid scale: 12 13 14 16
Confident scale: 12 18 28 42
Step between neighbours
timid: about 1.1x
confident: about 1.5xTimid: four sizes that look like one size, slightly wrong.
Confident: four sizes that look like four levels.Pick your sizes once, write them down, and use only those. You rarely need more than three or four.
Check yourself
Sara's café menu lists 30 items. Section names like 'Hot drinks' are 13pt; items are 12pt. Customers keep asking where the teas are. What is the best fix?
- Underline the section names and leave the size
- Put a decorative border around the whole menu
- Switch the section names to a font that is almost the same as the item font
- Make section names about 20pt bold with extra space above each
Show the answer
Make section names about 20pt bold with extra space above each
Yes. Size plus weight plus space makes each section start impossible to miss, and customers can jump straight to what they want.
Check yourself
Timid or clear?
- Two nearly identical sans-serif fonts on one page
- A 48pt number beside a 14pt label
- A heading in slightly darker grey than the body
- One filled button beside one outlined button
- Bold title over regular body text
- Body at 12pt, captions at 11pt
Show the answer
Timid: looks like a mistake: Two nearly identical sans-serif fonts on one page, A heading in slightly darker grey than the body, Body at 12pt, captions at 11pt
Clear: looks intended: A 48pt number beside a 14pt label, One filled button beside one outlined button, Bold title over regular body text
THE OTHER HALF
Same job, same look
Contrast only means something if the rest is consistent. If your three section headings are 24pt bold, 22pt bold and 24pt italic, the reader has to work out whether those are three kinds of heading. Decide one style per role, such as title, heading, body and caption, and never drift from it.
In a 15-slide deck, every slide title sits in the same spot at the same size and colour. The one slide where the title is huge and centred then clearly says: this one is special.
Check yourself
The safest way to make a heading stand out is to change it a little in many ways: slightly bigger, slightly darker, a slightly different font.
Show the answer
False
Many small changes add up to a heading that looks a bit off, not one that stands out. Change one or two things by a lot: for example double the size and make it bold, and keep the same font.
Check yourself
Nima has one slide to show that sign-ups grew 40% this year. Which version uses contrast best?
- The full sentence in 24pt with '40%' in a slightly different blue
- The full sentence 'Sign-ups grew by 40% this year' in 32pt bold
- '40%' at 96pt in the brand colour, with a 24pt grey label below
- The sentence in 24pt with a drop shadow, an underline and italics, so several signals point at the number at once
Show the answer
'40%' at 96pt in the brand colour, with a 24pt grey label below
Right. One huge number, one quiet label. The audience gets the point before Nima opens his mouth.
Lesson recap
- Different jobs should look obviously different; same jobs should look the same.
- Timid contrast reads as a mistake. Make near-twins identical or push them far apart.
- Recipes: size jumps of 1.5–2×, regular against bold, dark against light, clearly unlike shapes.
- Change one or two properties a lot, not five a little.
- In Persian, build contrast with size, weight and colour; there are no capitals or true italics to lean on.