Design Psychology
Key question
How do colours and fonts work?
Colour and typography are the quickest ways to create mood, tone, and order. At the same time, they determine whether text is legible and an interface is accessible to everyone.
Learning objective: You make reasoned choices for colours and fonts, test contrast and readability, and can explain why there are no one-size-fits-all colour formulas.
Colour and typography speak before anyone starts reading.
4.1 / Colour & Contrast
Readable is whatever contrasts enough.
Colour can be described using hue, saturation, and brightness. When it comes to readability, it is primarily the brightness contrast between text and background that matters, rather than the hue. Light grey text on white is difficult to read, even if you like the colour.
The Web Content Accessibility Guidelines (WCAG) specify benchmark values that you can check with a contrast checker:
NORMAL TEXT
min. 4.5 : 1
Contrast ratio for body text (Level AA).
LARGE TEXT
min. 3 : 1
For large text, from approx. 24 px or 19 px bold (Level AA).
COLOUR ONLY
Never without a sign
Also show status and errors with an icon or text.
Around 8% of men and roughly 0.5% of women have red-green colour blindness. Therefore, never rely on colour alone.
Contrast first, hue afterwards.
4.2 / Colour effect
Colour associations are learned, not fixed.
Colours trigger associations, but these are shaped by culture and context. Red can signify danger, love, good fortune, or a discount, whilst white represents weddings in some cultures and mourning in others. Context matters too: a red element on a banking website has a very different effect to one in an emergency app.
Broad claims such as 'blue builds trust' are oversimplifications. Studies on the effects of individual colours are often small or difficult to replicate. Running tests with your own target audience provides more reliable results.
Practical takeaways: Use colour functionally first (hierarchy, state, grouping), keep the palette small and consistent, and test assumptions about its impact rather than taking them for granted.
Colour means nothing without context.
4.3 / Typography
Good typography goes unnoticed; it supports.
Readability depends on font size, contrast, line length and line spacing at least as much as it does on the font family. For body text on screen, the following rules of thumb apply:
FONT SIZE
from 16 px
Minimum size for body text on screen.
LINE LENGTH
45–75 characters
per line, so that the eye can find the start of the next line.
LINE SPACING
1.4–1.6 ×
the font size, so that lines don't overlap.
Lines that are too long cause fatigue because the eye struggles to find the start of the next line. Lines that are too short disrupt the reading flow. Left-aligned text with consistent word spacing is usually the easiest to read in Western languages.
Stick to one or two font families and build hierarchy through size and weight, rather than lots of different typefaces.
Line length and line spacing are half of typography.
4.4 / Text & Audio
Type has a sound.
The character of a typeface shapes tone and expectation: a classic serif font tends to appear traditional and respectable, a geometric sans-serif looks more modern and functional, while a handwritten style feels more personal. Such associations are general tendencies and depend on culture and experience.
Credibility can also play a role. A widely cited online experiment found that the exact same statement was judged to be slightly more credible in a classic serif font than in other typefaces. Such effects are small and context-dependent, and certainly no reason to commit yourself to just one font.
What matters is the fit: font, content, brand, and target audience should together strike the desired tone.
The font sets the tone before the first word is read.
Exercise
Apply, evaluate, transfer
Task: Adapt the same message (for example, an event announcement) into three different font and colour schemes.
STEP 1
Decide beforehand which three tones you want to create (for example, calm, playful, technical).
STEP 2
Choose one font and a small colour palette per world, and check the contrast.
STEP 3
Show the three versions to others without revealing your intention, and ask: Which brand or tone do you perceive?
STEP 4
Compare intent and perception.
Evaluation: Where did intention and impact align, and where did they not? Were there differences between the respondents? What would you change?