A grid system is the most underrated tool in a designer's kit: an invisible structure that makes a catalog, a book, or a website read as one coherent whole.
Below is a step-by-step method you can work through in fifteen minutes using our free tools. Each step links to a tool preloaded with the settings from this example: an A4 catalog.
Step 1. Format and medium
Start by asking where the project will be seen: print or screen, A4 or a phone, held in the hand or viewed from a distance. The format sets the frame for everything that follows: page proportions, possible margins, the width of the type area, and the range of sensible column divisions. The number of columns itself follows only once you know the content type, point size, typeface, and target measure.
Match the units to the medium: in print, mostly millimeters and points; in screen projects, CSS units such as px, rem, em, or ch.
Open the grid generator with A4 format
Step 2. Margins: canon or a deliberate decision
Margins define the type area, the rectangle that holds the text. You have two paths here: reach for a ready-made canon, or decide for yourself, guided by the publication's purpose.
A canon is not a single number, but a set of three proportional rules. First, the margin dimensions are fractions of the page dimensions, not millimeter values, so the same recipe works at any format. Second, the margins grow in a fixed order: the inner margin is narrowest, then the top, then the outer, and the bottom is widest. Third, in the Van de Graaf construction the type area keeps the page's proportion, so it repeats the page's shape at a smaller scale. The ratio 2:3:4:6 gives the same result only on a page with a 2:3 proportion; on A4 the type area already has a different proportion than the page.
These rules were not invented at a drawing board, though their pedigree deserves some caution. In old manuscripts and early printed books, type-area proportions are sometimes strikingly regular, and in the mid-twentieth century geometric constructions were proposed, based on the diagonals of the page and the spread, that reproduce these layouts. They are reconstructions: we cannot be certain the old masters used exactly this kind of drafting. They were described and popularized by Jan Tschichold in an essay on book proportions from the mid-1950s. The practical rationale is simple: a spread is viewed as one unit, so the inner margins, meeting at the spine, sum up optically and must be narrower. The bottom margin is widest because the page appears to settle visually, and it is where the reader's thumbs rest.
Van de Graaf divides the page into ninths: the inner margin is 1/9 of the width, the outer 2/9, the top 1/9 of the height, the bottom 2/9. For a page with a 2:3 proportion, this gives a 2:3:4:6 ratio in the order inner, top, outer, bottom, the same layout described by Tschichold. So the two recipes are not independent: on a 2:3 page they lead to the same solution, and our 160 × 240 mm example has exactly that proportion. The result is wide, breathing margins and a type area that shares the page's proportion.
The second path is a decision: margins of your own, sized for the job. You take this route when the publication is not a book meant for long reading: in a catalog, a flyer, a report, or a screen project, a canon usually gives up too much surface area. A decision does not mean arbitrariness, though, because it follows from concrete factors: how much content must fit on the page and whether you need to save paper; how the publication will be bound, since a glued binding eats into part of the inner margin and it has to be widened; whether images bleed to the edge, which requires a bleed allowance and changes the perceived width of the margin; which fixed elements must fit on the page, from pagination and running heads to a barcode or a legal footer; and finally how the reader holds the publication and, as a result, where content should not sit.
A practical tip: instead of typing a round 20 mm, pick a proportion and hold to it consistently across the whole project. In our A4 catalog example, we settle on symmetric margins of 16.8 mm, at which the type area takes up roughly 70 to 75 percent of the page surface. The generator shows this share live, so you can see immediately how much space you are giving to white space and how much stays for content.
See the Tschichold canon on a 160 × 240 book spread
Step 3. Leading as the grid unit
The most important decision in the whole process: the leading of the body text becomes the unit of the baseline grid. Text set at 10 pt with 12 pt leading means a grid every 12 pt, or 4.233 mm. From this point on, everything that has a height is counted in lines: the type area, modules, images, spacing.
This keeps lines in neighboring columns on a shared rhythm, and with consistent recto-and-verso composition, the lines of text on both sides of a sheet fall at the same heights, which limits the visual clutter caused by show-through on thin paper.
The tool fits the type area to a whole number of lines in two ways, and you choose which. The first moves the leftover height into the bottom margin and shows you by how much it grows. The second leaves the margins untouched, which matters for canons, and makes a minimal leading correction instead. When at least one full line is missing to fill the area, the tool suggests line counts that fit exactly, with no remainder.
Step 4. Columns and the measure
The number of columns follows from the content, not from fashion. For running text it is usually worth aiming for 45 to 75 characters per line, with a middle value around 66, and adjusting depending on the typeface, point size, and character of the publication. Narrow magazine columns can be noticeably shorter, and at 35 to 50 characters they can still work very well.
Twelve narrow columns are not twelve columns of text; they are a flexible division: text can occupy 3, 4, or 6 of them, and images any number at all. The tool estimates the characters per line for a single column, assuming an average character width of 0.47 em, and suggests how many columns to combine to land in a comfortable reading range. This is an approximation: a specific typeface can shift the result by a few characters either way.
Step 5. Fields: modules in whole lines
Modules arise at the intersection of columns and rows: dividing the type area into rows turns the columns into a grid of fields. You will see layouts of 8, 20, or 32 modules, but these are examples, not a canon; 12 or 24 work just as well. The practical rule is: express both the height of the fields and the gutters between them as a whole number of baseline-grid units. A classic and very convenient solution is a gutter equal to one line, though two or more also occur. That way, an image spanning two fields vertically ends at the same height as the text beside it.
Open the 20-field grid (4 × 5) on A4
Step 6. Images on the grid
An image should occupy whole fields: 1 × 1, 2 × 1, 2 × 2, 3 × 2, and so on. Its edges should consistently relate to the module boundaries and to the rhythm of the lines. The most reliable reference is the module boundary: the bottom edge of the image lines up with the bottom edge of the field, and so with the baseline of the last line that fits inside it. Classic treatments also align the top edge with the cap height of the adjacent text; pick one convention and hold to it throughout the publication.
The span table in the generator gives the dimensions and proportions of blocks spanning up to four columns and four rows, sixteen of the most common crops in all. That lets a photographer or retoucher know how to frame a shot before composition even begins.
Step 7. Typography on the same grid
A grid without type is empty. The Match a typeface to this grid button carries the leading, point size, and column width over to the typography tool, which builds a full hierarchy: caption, body text, lead, and three levels of headings.
The leading of each level in the hierarchy relates back to the base module: it can be a whole multiple of it or, on a more flexible grid, a half multiple. Splitting into half-lines is a modern extension of the classic model, which avoided halves; in our tool, body text and captions keep whole lines, while the lead and headings can sit on a half-line. The tool only tracks the leading itself and does not enforce the height of whole blocks or the spacing before and after them; getting back onto a whole line is the designer's job.
Open the typography tool with this catalog's settings (six-column measure)
Step 8. Checking and export
To finish, ask yourself four questions: is the heading hierarchy clearly visible, does the smallest text stay comfortably legible on the target technology, does the running text have the right measure, and do the elements consistently return to the grid's rhythm.
The tool warns when a caption drops below 7 pt in print or 12 px on screen. These are warning thresholds built into the calculator, not standards: 7 pt can read perfectly well in a typeface with a tall x-height on good paper, and can fail in a delicate face on absorbent paper, and web accessibility guidelines do not set a minimum point size at all: they require text to be resizable up to 200 percent without loss of content and with correct layout reflow at a 320 CSS-pixel width.
Once everything checks out, export the grid as a DTP program specification sheet, a 1:1 scale PDF (underlay and proof print), an SVG, or CSS Grid with custom properties for a website. You can send the configuration link to collaborators; it will open the tool in exactly this state.
When the project will be seen from a distance
A poster, an exhibition-stand wall, or a banner follow a different logic: legibility is decided by the viewing angle, not the point size. For a simple, high-contrast piece of lettering, an approximate cap height can be worked out from that viewing angle; assuming 15 arcminutes, this gives roughly 44 mm at 10 m and roughly 13 cm at 30 m. In a real project it is worth increasing this value, especially when the viewer is moving, sees the lettering only briefly, or contrast and lighting are worse. Typeface, stroke weight, and mounting height also play a role.
Summary
A good grid is not decoration; it is a decision made once and held consistently: format, margins, leading as the unit, columns, fields. Everything else about the work then moves faster, and the project stays coherent even as more pages are added to it.
