Rhythm and Repetition
Rhythm is consistent spacing between repeated elements. Repetition teaches the reader what to expect — and when met, the layout becomes effortless to navigate.
Music creates rhythm through patterns that repeat in time. Layout creates rhythm through patterns that repeat in space. A row of cards at consistent intervals. Section headings at consistent vertical distance from their content. Columns that maintain their proportions from page to page. The reader does not experience these patterns consciously — they experience them as legibility, as ease, as the feeling that this site knows what it is doing.
Repetition builds a template in the reader’s mind
Every time a pattern repeats, the reader internalises it. After encountering three article cards formatted identically — image, title, excerpt, date — the reader no longer needs to process each card individually. They have the pattern. The fourth card is read in half the time. The twentieth card in an instant.
This is the functional case for repetition. Consistent patterns reduce cognitive load by turning parsing into recognition. Recognition is faster and less effortful than parsing. A layout with strong repetition is faster to read and less tiring to navigate than one where every element requires fresh interpretation.
Vertical rhythm
In typographic layout, vertical rhythm refers to consistent vertical spacing between text elements. When headings always sit at a specific distance above their body text, and paragraphs always have consistent line-height, the text settles into a grid that the eye tracks without effort.
Vertical rhythm does not require mathematical precision — readers cannot measure pixels. But the spacing needs to feel consistent. Sections that have 40px above and 12px below, followed by sections with 20px above and 32px below, produce a page that feels unresolved. Sections that each have 48px above their heading and 16px between their heading and content produce a page that feels structured.
Repetition vs monotony
Repetition creates comfort. Monotony creates boredom. The difference is whether variation exists at a higher level.
A page of identical cards with no variation is monotonous. But a page of identical cards, organised into distinct sections with section headers, is rhythmic and varied. The cards repeat (expected, comfortable), but the sections break that repetition at a larger scale (fresh, structured). The variation exists at a higher level of the hierarchy.
This is the principle behind typographic scale in a well-structured article: body text repeats at a fine grain, H2s break it at a medium grain, H1 breaks it at a large grain. Each level of the hierarchy repeats consistently within itself, and the contrast between levels creates interest and structure.
When to break the rhythm
Breaking rhythm draws attention. When seventeen cards in a grid look identical and the eighteenth has a different background colour, the eighteenth card receives disproportionate attention. This is valuable for featured content, promotions, or critical calls to action. It is the same principle as emphasis in typography — it works only if the surrounding context is consistent enough to make the break meaningful.
An irregular rhythm — spacing that varies arbitrarily, cards that differ without reason — provides no such emphasis. It merely prevents the reader from building the template they need to navigate comfortably.
With composition principles in place, the next section examines responsive layout — how these structures adapt when the viewport changes. Start with responsive principles.