Grid and baseline
Vertical rhythm is what makes a page feel composed rather than assembled. When every line box lands on a shared baseline — 4, 6 or 8px — text in adjacent columns aligns across the whole page. Toggle the grid and baseline overlays on the canvas to see exactly which elements break the rhythm.
Issue 04 — Typography
The quiet discipline of setting type well
Why measure, rhythm and contrast decide whether a page feels resolved
Most typographic problems are not mistakes of taste. They are small measurable things — a measure that runs too wide, leading borrowed from a different size, a hierarchy whose steps are too close together — and each one costs the reader a fraction of attention. Set them right and the page stops asking for effort.
“Typography exists to honour content.” — Robert Bringhurst
Analyse this layout
Figure 1 — Vertical rhythm across a 8px baseline grid.
632px measure~79 characters per line · recommended 45–75
Line heights of 22.9px and space-before values of 17px and 23px land between the 8px grid lines (shown in red). Every subsequent element inherits the drift, so nothing ever re-aligns.
Issue 04 — Typography
The quiet discipline of setting type well
Why measure, rhythm and contrast decide whether a page feels resolved
Most typographic problems are not mistakes of taste. They are small measurable things — a measure that runs too wide, leading borrowed from a different size, a hierarchy whose steps are too close together — and each one costs the reader a fraction of attention. Set them right and the page stops asking for effort.
“Typography exists to honour content.” — Robert Bringhurst
Analyse this layout
Figure 1 — Vertical rhythm across a 8px baseline grid.
632px measure~79 characters per line · recommended 45–75
Every leading value is a multiple of 8 — 72px, 32px, 24px, 16px — and every space-before snaps to the grid. The red lines disappear behind the text because nothing crosses them.
How TYPAL checks this
- Whether each line box height divides evenly into your baseline
- Space-before values that fall between grid lines
- Cumulative drift — how far the last element sits off the grid
- Column grid fit: margins and gutters against your container width