Typography grids — six layout systems for clean rhythm and honest spacing.

A typography grid is a layout grid used to organise text and other typographic elements on a page or screen. It governs column widths, gutter spacing, vertical rhythm (baseline alignment), and modular spacing between blocks. The Swiss school typographers (Müller-Brockmann, Ruder, Hofmann) systematised typography grids in the 1950s; web and product design adopted them in the 2000s through systems like the 960 grid and later the 12-column responsive grid.

For long-form text, use a Manuscript Grid (one big text block with margins). For magazines, books, or text-heavy editorial layouts, use a Column Grid (2–4 columns). For complex layouts mixing text, images, and modules, use a Modular Grid (columns plus rows). For web and app layouts, use a 12-Column Web Grid plus an 8pt Spacing Grid for consistent vertical rhythm. For information-rich pages with no fixed structure, use a Hierarchical Grid that responds to content rather than imposing a system.

The 8pt grid system constrains all spacing values (margins, padding, gaps) to multiples of 8 pixels — 8, 16, 24, 32, 48, 64. It originated in print and was popularised in product design through Google's Material Design (2014) and Bootstrap. The 4pt variant uses 4-pixel multiples, allowing finer control while still producing consistent rhythm. The system simplifies design decisions, ensures cross-platform consistency, and makes design-to-engineering handoff easier.

Strict baseline alignment is harder on the web than in print because line-height varies across fonts and sizes, and CSS doesn't expose true baseline metrics. Most professional web designers approximate baseline rhythm with consistent line-height multiples (1.5, 1.6) tied to the spacing scale, rather than enforcing pixel-perfect baseline alignment. The exception is editorial web design (long-form articles, online magazines) where careful baseline rhythm makes long reading more comfortable.

A column grid divides the page horizontally into vertical columns separated by gutters, governing left-to-right placement only. A modular grid adds horizontal divisions (rows) on top of those columns, producing a matrix of rectangular cells — modules — that constrain content both horizontally and vertically. Reach for a column grid when text flows naturally down columns; reach for a modular grid when you need to align a mix of text, images, and components to a consistent two-dimensional structure, as in magazine spreads and dashboards.

There is no single correct number — it depends on page width and how many distinct content streams you need. Printed magazines and newspapers commonly run 2 to 6 columns; books often use a single manuscript column. On the web, the 12-column grid became the editorial layout default because 12 divides evenly into 2, 3, 4, and 6, so the same grid supports halves, thirds, and quarters without re-deriving gutters and margins. Choose the highest column count that still gives a comfortable type measure (line length) of roughly 45 to 75 characters.

Vertical rhythm is the consistent vertical spacing between lines and blocks of text, set by tying leading (line-height) and the spacing between elements to a single repeating unit — the baseline grid. When every text line and gap is a multiple of that unit, the eye returns reliably to the start of each next line and stacked blocks feel related rather than ad-hoc. Pairing a baseline grid with an 8pt or 4pt spacing scale keeps that rhythm coherent across headings, body copy, and interface components.

The Swiss school argued the opposite: a grid frees the designer from layout decisions so creative attention can focus on content, hierarchy, and detail. Postmodern designers (David Carson, Neville Brody) deliberately broke grids to make a point — but breaking a grid only reads as expressive when the grid is recognisable underneath. The grid is the structure against which the variation registers. In practice, most professional designers use a grid as a default and break it intentionally for emphasis.