Typography, color, and readability

What you will build

Create type and color tokens with clear hierarchy and sufficient contrast.

Understand the idea first

Rem units respect user font settings.

Build it step by step

:root {
  --ink: #172033;
  --muted: #526077;
  --accent: #c2410c;
  --surface: #ffffff;
}
body {
  font-family: system-ui, sans-serif;
  color: var(--ink);
  line-height: 1.65;
}
p {
  max-width: 68ch;
}
.meta {
  color: var(--muted);
  font-size: 0.875rem;
}

1. Create four color variables and replace repeated color literals.
2. Set a system font and line height.
3. Limit paragraphs to 68ch and test at 200% zoom.
4. Check text, muted text, and link contrast in DevTools.

Read the important lines

• Rem units respect user font settings.
• Color must not be the only status cue.
• Links need a recognizable treatment beyond a slight color shift.

Common mistakes and what to check

Practice without copying

Create a minimal type scale for headings, body, metadata, and links; test at 200% zoom.

Completion check

• I produced the required visible result
• I can explain the input, processing, and output
• I tested normal, edge, and failure cases