Typography, Spacing, and Visual Hierarchy

A portfolio should help someone understand your work.

Visual design is not a contest to add the most gradients.

Hierarchy answers questions

A visitor should quickly see:

• who this site belongs to;
• what the page is about;
• which projects matter;
• where navigation lives;
• what can be clicked;
• how sections relate.

Typography and spacing are system signals.

Build a simple scale

Use a small spacing system instead of random margins:

:root {
  --space-xs: .5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
}

Use consistent heading relationships.

Avoid five font families and eleven arbitrary font sizes.

Read the HTML before CSS

If visual hierarchy requires skipping heading levels or turning a <div> into a fake button, the structure may be wrong.

CSS should enhance semantic source, not replace it.

Contrast and readability

Check:

• text/background contrast;
• line length;
• line spacing;
• font size at common zoom levels;
• link visibility;
• focus visibility.

Portfolio action

Choose three design rules and write them down.

Example:

1. One primary type family.
2. Maximum reading width around 65–75 characters.
3. Shared spacing tokens instead of arbitrary section margins.

Apply them consistently.

Checkpoint

Take one before/after screenshot and explain which information hierarchy improved, not merely which version looks cooler.