Typographic Hierarchy for the Web
A focused workshop where typography theory meets practical application — studying typeface selection, spacing systems, and readability at scale.
Hierarchy in type is not about making headings big and body text small. It is about the relationships between elements and whether the reader can find what they need without thinking about it.
Where hierarchy breaks down
The course opens with common failure patterns: too many weight levels, inconsistent spacing between sections, heading styles that look different from their semantic role. You will audit an existing page before building anything new.
Building a clear structure
You will work through a full content hierarchy — from display headings to captions and metadata — using only weight, size, spacing, and colour contrast. No decorative elements. The constraint is intentional.
Long-form versus interface type
Article layouts and UI text follow different rules. Line length that works for reading does not work for a dashboard label. The course covers both with separate exercises.
You will finish with a documented type system for a multi-page site, including tokens you can hand off to a developer or use directly in a CSS custom property setup.
Workshop structure
Each step in this workshop builds directly on the previous. Participants work through real web typography scenarios rather than reading about them.
What the Course Covers
- Auditing existing type hierarchy: what to look for
- The role of size, weight, spacing, and contrast in hierarchy
- Building a scale with clear relationships between levels
- Long-form text layouts: articles, documentation, editorial
- UI type: labels, captions, navigation, metadata
- Colour contrast for type: WCAG AA and AAA requirements
- Documenting a type system as design tokens
- Handoff formats for developer collaboration