/taɪpəˈɡræf.ɪk ɡrɪd/

Typographic grid

noun · typography & graphic design

What it is

A typographic grid divides the page into a set of fields — columns running vertically, separated by gutters, and often flow lines running horizontally — against which every element is positioned. Text blocks, headings, captions, and images each snap to column edges and flow-line boundaries rather than floating freely. The result is a layout in which spacing decisions are made once, encoded in the grid, and then reused on every page of a document.

The grid is a tool for consistency at scale, not a constraint on creativity. A single grid can host dozens of distinct page layouts: a two-column text spread, a full-bleed image, a captioned figure, and a data table all derive their alignments from the same underlying columns. Designers describe a grid by its column count and the width of its gutters — a "twelve-column grid with 24-pixel gutters", for instance.

Etymology

The modern typographic grid is a product of the Swiss (International) Typographic Style of the 1940s–60s. Its codification is usually credited to Josef Müller-Brockmann, whose Grid Systems in Graphic Design (1981) is the standard reference, and to Karl Gerstner, who framed the grid as a "programme" in Designing Programmes (1964). The approach grew from earlier Bauhaus and New Typography experiments by Jan Tschichold, who in the 1920s argued for asymmetric, rule-driven layout in place of centred ornament.

Examples in use

"Lay out the annual report on a twelve-column typographic grid so the charts and the narrative columns share the same vertical edges." A magazine art director might set a six-column grid that collapses to three columns for feature spreads and two for long-form text. On the web, CSS Grid and flexbox frameworks reimplement the same idea — Bootstrap's twelve-column system is a typographic grid expressed in code.