R093 · 21 Colour, Graphics & Typography

Colour, Graphics & Typography at a Glance

This infographic summarises how visual choices support branding, readability and audience appeal.

Colour – Mood, Meaning and Contrast

Colour is one of the fastest ways to communicate meaning. It is also vital for accessibility – poor contrast can make text difficult or impossible to read.

Colour Meaning (Context Matters)

• Red – urgency, danger, excitement, love, energy.
• Orange – friendly, fun, creativity, affordability.
• Yellow – happiness, warmth, attention-grabbing.
• Green – nature, health, environment, money.
• Blue – trust, technology, calm, professionalism.
• Purple – luxury, creativity, mystery.
• Black/white – contrast, sophistication, minimalism.

Contrast and Readability

• Use high contrast between text and background (e.g. dark text on light background).
• Avoid clashing colours that make text vibrate or strain the eyes.
• Remember colour blindness – don’t rely only on red/green to show differences.

Colour and Branding

• Brands usually have a fixed palette (primary and secondary colours).
• Consistent colour use across website, app, packaging and social media builds recognition.
• Use colours that fit the audience – e.g. bright and playful vs muted and professional.

Graphics – Images, Logos and Icons

Graphics include photos, illustrations, logos, icons and diagrams. They must be appropriate for the product, audience and purpose.

Types of Graphics

• Photographs – realistic, can show real people, places and products.
• Illustrations – stylised, good for younger audiences or explainer content.
• Logos – simple visuals representing a brand or organisation.
• Icons – small, simple graphics used in interfaces and infographics.

Technical Considerations

• Resolution – high enough to avoid pixelation at the final size.
• File format – e.g. PNG for transparency, JPEG for photos, SVG for scalable icons.
• Compression – balance quality with file size for web and mobile.

Choosing Suitable Graphics

• Match the tone of the product (serious, playful, formal, informal).
• Ensure representation is inclusive and appropriate (age, culture, diversity).
• Make sure images support the message – not just random decoration.

Typography – Fonts and Layout

Typography covers the choice of typeface (font) and how text is laid out on the page or screen. Good typography makes content easy to read and suits the brand image.

Font Types

• Serif (with small strokes, e.g. Times New Roman)
  Effect: traditional, formal, often used for print or serious content.
• Sans serif (no strokes, e.g. Arial, Helvetica)
  Effect: modern, clean, common for digital content and headings.
• Display / decorative
  Effect: eye-catching for logos or headings but usually not suitable for body text.

Readability and Hierarchy

• Use a clear hierarchy – different sizes and weights for titles, subheadings and body text.
• Keep line length and spacing comfortable so paragraphs are easy to read.
• Avoid using too many different fonts on one product – two or three is usually enough.

Typography and Audience

• Younger audiences may prefer bold, playful typefaces with strong headings.
• Professional or formal audiences expect clean, simple and consistent typography.
• Font choices must always support accessibility – avoid tiny or overly decorative body text.