How & Why
A typesetting project developed for the MA Web Design programme, built using HTML and CSS only. No images, JavaScript, or frameworks were used. The work focuses on how typography, spacing, and colour can carry meaning and structure a reading experience. The layout translates the core argument of the text into a visual system, exploring the relationship between craft (How) and purpose (Why).
The brief
Typography as a functional design tool
The brief required presenting a long-form text using only typography, spacing, and colour. No images or decorative elements were permitted. The source material was Chapter 1 of Frank Chimero’s The Shape of Design, which explores the tension between How (execution) and Why (intent).
This constraint shifts typography from a supporting role to the primary design system. Every decision must contribute to clarity, hierarchy, and meaning, rather than visual decoration.
Concept
Translating concept into layout
The layout is based on Chimero’s idea of moving between close work (How) and reflective distance (Why). This is expressed through two distinct typographic and spatial modes.
Dense layout for execution (How)
Narrow columns, tighter line height (1.35), and reduced spacing create a compact reading experience. This reflects focused, detail-driven work and keeps the reader close to the content.
Open layout for reflection (Why)
Wider margins, increased line height (1.8+), and more generous spacing create a slower, more reflective reading pace. This gives the reader space to step back and consider the text.
Typeface pairing as system
Playfair Display is used for Why, supporting a more reflective tone. Inter is used for How, prioritising clarity and function. The pairing reinforces the conceptual split across the layout.
Decisions
Key design decisions
Playfair Display (Why) and Inter (How) are supported by fallback stacks to maintain consistency across environments. The distinction between the two roles remains clear even if primary fonts fail to load.
The palette (ink blue, ivory, soft grey) supports readability and contrast while reinforcing the conceptual split between production and reflection. All combinations were checked against WCAG AA standards.
Removing imagery ensures that layout and typography carry the full communicative load. Spacing, hierarchy, and rhythm become the primary tools for structuring meaning.
The project is divided into Text, Author, and Reflection. Each section shifts in density and pacing, guiding the user from close reading to broader interpretation.
Process
Process
Text analysis
The text was analysed to identify shifts in tone and structure, informing where the layout should tighten or open.
System definition
A dual-layout system was defined based on proximity and distance, applied consistently across all pages.
Palette testing
Multiple palettes were tested against accessibility standards and refined to support both readability and concept.
Build
The site was built using semantic HTML and a single CSS file. It is fully responsive, using flexible layouts and relative units without relying on JavaScript or frameworks.
Outcome