Grid systems: layout grid generator for print and screen
Build a grid system the way typography manuals teach it: page or screen format, margins from a canon (Van de Graaf, Tschichold) or a preset (golden section, modular, equal margins) or your own, columns with gutters, modules in whole baseline units, leading and a type scale aligned to the baseline grid. Live preview, export to SVG, PDF, CSS Grid, JSON and DTP settings.
Ready-made settings for typical projects. Choosing one fills the fields below, which you can still edit.
Page / screen
Margins
Book canons (Van de Graaf, Tschichold) and the golden-section preset deliberately give wide margins: the type area is about 40–60% of the page. For flyers, posters and screens choose symmetric or custom margins.
Columns and modules
Baseline grid
Type scale
Values
Image spans on the grid
An image fills whole fields: bottom edge on a baseline, top edge about 0.7 of the type size above the first line’s baseline (cap height). The gap between fields is one line.
Code and settings
What is a grid system and why build one?
A grid system is the invisible structure of a layout: margins define the type area, columns and gutters organise widths, modules organise heights, and the baseline grid (leading) makes text in adjacent columns and on facing pages sit on the same lines. A well-built grid speeds up design, unifies a publication and lets print and screen share one logic of proportion.
Margin canons (Van de Graaf, Tschichold) and the golden-section preset
The Van de Graaf canon is a geometric construction dividing the page into ninths: inner margin 1/9 of the width, outer 2/9, top 1/9 of the height, bottom 2/9. The type area keeps the page proportion. Tschichold described the 2:3:4:6 proportions (inner : top : outer : bottom). The golden-section preset scales margins by 1.618 (1 : φ : φ : φ², from 1/12 of the page width); it is not a historical canon. The generator computes these values for any format and lets you adjust them by hand. A canon is a starting point, not a dogma.
Baseline grid and type scale
The leading of body text (e.g. 12 pt) becomes the baseline unit: the type area is fitted to a whole number of lines, modules are whole lines tall, and heading sizes from the scale (1.2 · 1.25 · 1.333 · 1.5 · 1.618) receive leading that is a multiple of the unit, so everything sits on one grid. For screens the same logic works in pixels (e.g. 8 px), with export to CSS Grid and CSS custom properties.
Glossary: grids, typesetting and the column
- Grid system
- A set of layout rules: margins, columns, modules and a baseline grid that together govern where text and images sit across a whole publication or website.
- Typesetting
- Arranging text and graphics on the page according to fixed parameters: format, margins, columns, type size and leading. Once the setting of metal type, today work in a DTP application or in CSS.
- Type area
- The area of the page inside the margins where text and images are placed. In book typography also called the text block or the page’s mirror.
- Column of text (measure)
- A vertical band of text of a fixed width; a page may carry one or more. In web design its counterpart is the content column.
- Grid column
- A unit dividing the width of the type area. A column of text may span one or several grid columns, e.g. 3 of 12.
- Gutter
- The empty band between grid columns or text columns. It is often set to the leading or a multiple of it so the horizontal grid agrees with the vertical one, but in the end it is chosen to suit the column width and type size.
- Margins
- The areas between the page edge and the type area: top (head), bottom (foot), inner (spine) and outer (fore-edge). On a spread the inner margins meet at the spine.
- Margin canon
- A historical construction that sets margin proportions, e.g. Van de Graaf (1/9 and 2/9 of the page) or Tschichold (2:3:4:6). A preset is a modern, conventional proportion, not a canon.
- Module (field)
- The rectangle formed where a grid column meets a grid row; the unit to which text blocks and images are anchored. An 8-, 20- or 32-field layout is a layout with that many modules in the type area.
- Baseline grid
- A set of horizontal lines spaced by the leading of the body text. The baselines of lines in every column and on facing pages sit on the same grid lines.
- Baseline
- The invisible line on which letters without descenders (a, m, x) stand. Leading is the distance between consecutive baselines.
- Leading
- The distance between the baselines of consecutive lines, in points or pixels. 10/12 pt means a 10 pt size with 12 pt leading.
- Type size
- The nominal size of type in points (1 pt = 0.353 mm) or pixels. Letters are smaller than the size and depend on the typeface: in most text typefaces capitals take about 0.66–0.73 of the size.
- Measure
- The width of a text column expressed in characters per line. For running text 45–75 characters are most often recommended; shorter lines chop the reading, longer ones tire the eye, though the limits depend on the typeface, size and kind of text.
- Typographic hierarchy
- An ordered set of text roles (caption, body, lead, headings) that differ in size, leading and weight, built on one shared scale.
- Type scale
- A sequence of type sizes derived from one ratio, e.g. 1.25: each size is the previous one multiplied by the ratio.
- Spread
- A pair of facing pages in an open publication. Its margins are mirrored: inner at the spine, outer at the edge.
- Vertical rhythm
- The regularity of vertical spacing that follows from the baseline grid: block heights and the spaces between them are multiples of the leading.
- Bleed
- Graphics extending beyond the trim line (usually 3 mm) to prevent white slivers after trimming. It is not part of the type area.
- DTP
- Desktop publishing: preparing publications for print on a computer. The tool does not export files for DTP applications; it generates a text summary (margins, columns, baseline grid) to be entered by hand in the document settings.
