Session 2: Design Foundations II — Colour & Type

Every colour has three independent properties, and separating them is what makes colour controllable rather than a matter of luck. Hue is which colour it is — red, green, blue — measured as a position on the colour wheel. Saturation is how intense or vivid it is, from a pure vivid colour at one extreme to grey at the other. Brightness (or value) is how light or dark it is, from white to black. Almost every amateur colour problem is a brightness problem disguised as a colour problem: two colours that seem to clash often simply have the same brightness, so nothing separates them.

Temperature divides the wheel into warm hues — red, orange, yellow — which read as energetic, urgent, close; and cool hues — blue, green, violet — which read as calm, professional, distant. Nigerian commercial design leans heavily warm because warmth reads as energy and invitation, which suits food, fashion, events and church materials; finance, health and technology lean cool because cool reads as trustworthy. Neither is right in the abstract. Choose the temperature from the message, not from preference.

A working palette has roles, not just colours. The primary carries the brand and covers the largest area. The secondary supports it — usually a neutral such as white, off-white, grey or near-black that gives the eye somewhere to rest. The accent is used sparingly for the one thing that must be noticed: the price, the button, the call to action. When the accent appears everywhere it stops being an accent, which is the single most common colour failure in commercial design.

The 60-30-10 rule gives you the proportions: roughly 60% dominant, 30% secondary, 10% accent. It works because it guarantees contrast by construction — a small vivid area against a large calm area is always visible, while two equal vivid areas fight each other. Build palettes with colour harmony relationships: analogous colours sit next to each other on the wheel and read as calm and unified; complementary colours sit opposite and read as bold and energetic; triadic colours sit at three equal points and read as vibrant but need careful proportioning.

Then check contrast, which is not optional. Body text needs a contrast ratio of at least 4.5:1 against its background, and large text at least 3:1. This is the WCAG accessibility standard and it is a real requirement, not a nicety — low-contrast grey text on white fails for a large proportion of viewers, especially on a phone in daylight, which is how most Nigerians will see your design. Use a contrast checker; do not trust your eye, because your eye adapts and a screen in a dark room is not a phone in the sun.

Serif typefaces have small strokes at the ends of letters — Times New Roman, Georgia, Playfair. They read as traditional, formal, established, and they work well for printed body text and for institutions. Sans-serif typefaces have no such strokes — Arial, Helvetica, Inter, Montserrat. They read as modern, clean, direct, and they dominate digital screens because they stay legible at small sizes. Script typefaces imitate handwriting and read as elegant or personal; they are for accents only, never for body text. Display typefaces are decorative and exist to be noticed at large size; they are almost always unreadable small.

The professional habit is to limit yourself to two typefaces, occasionally three. One for headings, one for body. More than that produces visual noise with no communicative benefit, and it is one of the most reliable amateur tells. Within those two you get all the variation you need from weight (light, regular, medium, bold, black), size, and case — not from adding another family.

Choosing deliberately means asking what the message needs. A law firm and a cake shop should not use the same typeface, because the typeface is communicating before anyone reads a word. Browse a library — Google Fonts is free and huge — and choose by asking whether the letterforms match the tone, then test them at the actual size you will use rather than at the large preview size that makes everything look good.

A type scale is a consistent set of sizes rather than sizes chosen one at a time. Pick a base body size and multiply by a ratio to get your other sizes — a common approach is 1.25 or 1.5. So with a 16px base and a 1.25 ratio you get 20, 25, 31 and so on. Using a scale means every size on the page relates to every other, which is why designed text looks ordered while arbitrary sizes look arbitrary even when the viewer cannot say why.

Line spacing (leading) controls readability more than font choice does. Body text needs roughly 1.4 to 1.6 times the font size; headings need tighter, around 1.1 to 1.2, because short lines do not need help being followed. Too tight and lines blur together; too loose and the eye loses its place between lines. Letter spacing (tracking) should be slightly increased for all-caps and small text, and slightly reduced for very large display text, which is why big headlines look better tightened.

Line length is the most ignored factor. Body lines should run roughly 45 to 75 characters — about 60 is ideal. Longer than that and the eye struggles to return to the start of the next line; shorter and it breaks rhythm constantly. On a poster this means your body text block should be far narrower than the page, which is exactly the kind of decision that looks deliberate and reads easily.

Colour failures cluster. Pure black on pure white is harsher than it needs to be — a near-black like #1A1A1A on white, or white on near-black, is easier to read. Vibrating colours — saturated red against saturated green, or blue against red — create a flickering edge because neither can settle as figure or ground; separate them with a neutral. Rainbow palettes use too many hues with no hierarchy, so nothing leads. And gradient text at small sizes destroys legibility entirely.

Typography failures cluster too. Stretching type — distorting it wider or taller than its natural proportions — is instantly recognisable and instantly cheap; scale it, never stretch it. Centred body paragraphs longer than a few lines force the eye to hunt for the start of each line. Widows and orphans — a single word alone on the last line, or a heading stranded at the bottom of a page — look careless and take ten seconds to fix. Fake italics produced by slanting a roman face rather than using the real italic look wrong to anyone who reads a lot.

The through-line in all of these is the same: they are shortcuts taken to save thirty seconds, and each one costs the design credibility that took hours to build. Learn the list and check against it before every delivery.