Post · October 22, 2026

AMDE 155: Give Your Website a Personality (Week 5)

AMDE 155 · Introduction to Web Design · Week 05

Typography, Color, and Visual Hierarchy

Typography and color do more than decorate a page. They help people understand what matters, move through information, and recognize a consistent visual identity.

TypographyColor & ContrastVisual HierarchyCSS Design Tokens

01 / THE BIG IDEA

Design gives information a reading order

Imagine a page where every word is the same size, every color competes for attention, and nothing feels more important than anything else. It might contain good information, but visitors would have to work harder to understand it.

Typography, color, spacing, and contrast create visual hierarchy: a set of cues that helps people notice the most important information first and understand how the rest is organized.

Typography

Use size, weight, line height, and line length to make content readable and establish levels of importance.

Color

Use a limited palette to create tone, group related elements, and draw attention where it is useful.

Consistency

Repeat a small set of styles so headings, body text, links, and buttons feel like parts of the same system.

Today’s goal: Create a simple style tile with a headline, subheading, body text, button, and a small palette. Test how typography and color affect readability.

02 / TYPOGRAPHY

Build a type hierarchy

Different kinds of text need different jobs. A headline introduces the main idea, a subheading organizes a section, body text carries details, and small labels or captions provide supporting information.

Scale

Make important headings larger than supporting text. Use a limited number of sizes instead of styling every line differently.

Weight

Use bold or semibold type selectively to signal importance. If everything is bold, nothing stands out.

Line length & spacing

Keep paragraphs at a comfortable measure and use line height that makes text easy to follow.

Example: a reusable type system

style.css · typography

h1 {
  font-size: clamp(2.5rem, 7vw, 5rem);
  line-height: 1.05;
  letter-spacing: -0.04em;
}
p {
  font-size: 1rem;
  line-height: 1.7;
  max-width: 62ch;
}

Notice: clamp() allows the heading size to respond to the screen width while staying within a minimum and maximum. The ch unit can help limit line length.

03 / COLOR & CONTRAST

Color should support readability

Color can establish mood, organize content, and emphasize an action. But text must remain readable against its background. Do not rely on hue alone to communicate important information.

Good practice: Test body text, small labels, and buttons—not just large headings. For accessibility, aim for a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text.

Interactive Color & Contrast Lab

Use the controls to change the text and background colors. The preview and estimated contrast ratio update as you work. Try a light-on-light or dark-on-dark combination, then adjust it until the text is easier to read.

Text color

Background color

Color & Contrast Lab

Make the important thing clear.

Contrast helps readers distinguish text from its background. A clear design can still have personality, but readability has to come first.

Example action

Estimated contrast ratio: — Choose colors to check contrast.

This small lab estimates WCAG contrast from the selected colors. Use a dedicated accessibility checker for final project verification.

04 / PUT IT TOGETHER

Make a visual system, not a pile of styles

A consistent page uses a small set of repeatable choices. Define colors once, reuse them, and give each one a purpose. The same idea applies to typography, spacing, buttons, and links.

style.css · reusable design tokens

:root {
  --color-ink: #20242c;
  --color-paper: #f7f5f0;
  --color-accent: #c64f3d;
  --space-unit: 8px;
}
body {
  color: var(--color-ink);
  background: var(--color-paper);
}
a {
  color: var(--color-accent);
}

CSS custom properties (also called variables) let you reuse the same color or spacing value. If you change the variable once, every rule that uses it can update.

05 / IN-CLASS EXERCISE

Create a one-page style tile

Choose a fictional artist, musician, exhibition, publication, or creative studio. Keep the content simple and focus on the visual decisions.

Choose a direction. Write three words describing the mood you want to communicate.
Set the type hierarchy. Create a headline, subheading, body text, and small label with clear differences in scale and weight.
Choose three to five colors. Give each color a job, such as background, body text, accent, or secondary information.
Style one action. Make a button or link that is easy to identify and read.
Test and revise. Check the text/background contrast and adjust any combination that is hard to read.

Success checklist

Headline, subheading, body text, and label are visually distinct.
The palette is limited and used consistently.
Links or buttons are identifiable without relying on color alone.
Body text is comfortable to read and has sufficient contrast.
The style tile communicates a clear visual direction.

Instructor-only material · Remove before publishing

Instructor demonstration — change one decision at a time

Use this sequence to model how CSS choices affect the same content. Keep the preview visible while you demonstrate.

Step 1 — Establish the hierarchy

Point to the headline, body copy, and button. Ask students which element they noticed first and why. Change only the heading size in the live example above, then ask whether the hierarchy feels stronger or weaker.

Step 2 — Change the palette

Use the text and background color pickers. First choose a combination with poor contrast, then adjust one color until the text is readable. Ask students to predict the outcome before changing each value.

Step 3 — Introduce a deliberate CSS error

Show the following rule with a misspelled property. Ask students to find the problem before correcting it.

debug-this.css

.demo-title {
  font-szie: 3rem;
  color: #20242c;
}

Correction: font-szie should be font-size. CSS may ignore an invalid declaration while applying the valid one. Fix the spelling and preview again.

Step 4 — Ask for reasoning

Which visual decision most clearly establishes hierarchy?
How does changing the accent color affect the mood?
Why is contrast a usability issue as well as a visual design issue?
Which styles should remain consistent across every page of a site?

06 / REFLECTION & NEXT STEPS

Connect today’s choices to your website

Use your style tile as a visual guide for the midterm and final websites. You can revise it as your project develops, but keep track of the decisions you make and the reasons behind them.

Before you leave

What is one typography or color choice you changed today?
What did that change do to readability or hierarchy?
What is one design decision you want to carry into your website project?