SkillGato

Design foundations · 23 min

Colour and typography

Colour and fonts create the mood of a design in an instant. A few simple rules prevent most beginner mistakes.

Colour combinations that work

The colour wheel shows how colours relate to each other. Three reliable ways to choose colours:

A colour wheel with three sample palettes next to it
1 complementary: opposite colours, strong contrast (blue and orange). 2 analogous: neighbours, calm and harmonious (greens and blues). 3 triadic: three evenly spaced colours, lively (red, yellow-green, blue).

Practical rules:

  • Use one main colour, one or two supporting colours, and neutrals (white, grey, near-black).
  • A useful balance is roughly 60% main or neutral colour, 30% supporting, 10% accent.
  • Use the accent for the one thing people must act on: the button, the price, the phone number.
  • Follow the client's brand colours exactly. In Canva, type the colour's hex code (for example #0F6E56) instead of guessing.

Contrast: can people read it?

Text must stand out clearly from its background, on a small phone screen and in bright sunlight.

Four tiles with the letters Aa: dark on white and white on dark green are clear; light grey on white and red on green are hard to read
The first two tiles are easy to read. Light grey on white is too faint, and red on green clashes and is hard for people with colour blindness.
  • Dark text on a light background, or light text on a dark background.
  • Avoid placing text directly on a busy photo. Add a solid shape or a dark overlay behind it.
  • Do not rely on red versus green alone to show a difference.

Typography: choosing fonts

Typography is how text looks: the font, size, spacing and line length.

On the left a clean design using two fonts; on the right a messy design using six different fonts
Left: one font for headings and one for text looks clean. Right: six fonts in one design look chaotic.
  • Use two fonts at most: one for headings, one for body text. Pairing a bold display font with a simple sans-serif is a safe choice.
  • Keep body text simple and readable; decorative script fonts are only for a word or two.
  • Leave enough line spacing, especially in Urdu Nastaliq, which needs extra room.
  • For Urdu and Arabic, use fonts made for those scripts (Canva lists them when you type in that language). Check that letters join correctly before downloading.
  • Never stretch or squash text to fit; change the size or the words instead.

Mood

  • Dark green and gold: trust, finance, premium.
  • Bright colours and rounded fonts: children, food, fun.
  • Black, white and thin fonts: fashion, luxury, minimal.

These are tendencies, not laws. Always design for the client's audience, not for your own taste.

Practice task (20 min)

  1. Choose a fictional business (for example a café) and pick a palette: one main colour, one supporting colour, one accent and neutrals. Write the hex codes.
  2. Choose one heading font and one body font.
  3. Design one post using only these colours and fonts, and check the text contrast on your phone.

Sign in or create a free account to save your progress and take the tests. Sign in