Published lesson · 25 minutes

Use spacing, type and colour with purpose

Objective: Choose spacing, typography and colour values that support a clear content hierarchy.

Understand the idea

This lesson focuses on use spacing, type and colour with purpose. Choose spacing, typography and colour values that support a clear content hierarchy. We will use a familiar community situation to make the idea concrete, then break it into decisions you can explain. You do not need special equipment or previous experience beyond the course prerequisites.

A local resource list becomes easier to scan when each resource has its own breathing room, readable line length and consistent heading style. Start by naming the information or action involved, then consider what a visitor or learner needs to understand. This small planning step makes the example easier to follow and helps you notice assumptions before they become confusing.

The box model describes the content, padding, border and margin around each element. The example is synthetic and contains no real organisation, personal details or promises about services. Treat it as a learning model: adapt the structure to your own situation, and check details with the people responsible before publishing anything publicly.

Start with a small spacing scale and a few text sizes. Check long headings and links at narrow widths rather than tuning only for a wide screen. Try changing one detail at a time and describe what changed. When something behaves differently from what you expected, return to the goal and inspect the relevant part instead of changing several things at once.

A calm, consistent system helps visitors find the next action without decorative noise. A useful review asks whether the result is clear, usable and appropriate for the intended audience. Invite another person to try it when possible, and make improvements based on what they can actually understand or do.

Worked examples

Use spacing, type and colour with purpose: a small example

See how use spacing, type and colour with purpose can help communicate or solve a practical community task.

styles.css

body {
  color: #25211d;
  line-height: 1.6;
}
.button { padding: 0.75rem 1rem; }

Practice tasks

  1. Explore use spacing, type and colour with purpose

    Use the worked example for “Use spacing, type and colour with purpose”. Change one small detail to suit a different synthetic community situation, then explain what you expected and how you checked whether the change still met the lesson objective.

  2. Build a CSS practice example

    Create a small practice result that demonstrates this objective: Choose spacing, typography and colour values that support a clear content hierarchy. Use only synthetic information, keep the first version focused, and write down one limitation that a later version should address.

  3. Review and explain the result

    Review your “Use spacing, type and colour with purpose” result as if another learner will use it without your explanation. Identify one strength, one exact point that may be unclear, and a revision that would make the result easier to understand or use.

Use spacing, type and colour with purpose becomes easier when you start with a clear purpose, try one small step and check the result from the learner or community member's point of view.

Course overview