Modular Grid
System for
Digital Surfaces

A systematic approach to vertical rhythm and horizontal alignment, translating the precision of Swiss print design into responsive web layouts. Every measurement derives from a single base unit.

The grid enforces consistency across content sections through fixed row heights, proportional margins, and typographic snap points. Content flows within the structure without breaking it.

01 — Vertical Rhythm

Every element's total vertical footprint -- content height plus padding, margin, and border -- must resolve to a multiple of the base unit. This discipline creates the invisible horizontal lines that give the layout its cohesion.

Fig. 1 -- Baseline grid overlay showing 8px increments across the full page height

Line-heights snap to the grid, not font sizes. A 13px body font at 20px line-height occupies 2.5 units. Headings at 38px use a 40px line-height -- exactly 5 units. The spacing between heading and body resolves the remaining offset.

This is where most web implementations fail. They pick a type scale and let line-heights fall where they may. In print, this would be unacceptable.

02 — Column Structure

Four columns with proportional gutters and generous outer margins create a flexible framework for placing content at different densities across the page.

Outer margins are wider than column gutters

The page margin at 64px is roughly 2.7x the 24px column gutter. This creates a visual frame around the content area and prevents the grid from feeling like it runs edge-to-edge. Print designers call this "generous margins" -- the white space around the content is as important as the content itself.

Gutters create the vertical channels

The 24px gutter between columns provides enough separation that adjacent text blocks don't bleed into each other visually, but narrow enough to maintain the feeling of a unified grid rather than isolated panels. The gutter width is 3 base units -- a deliberate, proportional choice.

Content spans respond to information density

Headlines span 2 columns when they need room. Body text stays in single columns for comfortable line lengths. Images span 2-3 columns for impact. The grid enables these decisions without breaking rhythm.

03 — Image Treatment

Images conform to the column grid horizontally and snap to the baseline grid vertically. Captions use the smallest type size in the system and align to the same baseline.

Fig. 2 -- Single column, fixed height

Fig. 3 -- Two columns, same fixed height

Fig. 4 -- Portrait

Fig. 5 -- Portrait

Fig. 6 -- Portrait

The grid is not a limitation.
It is the structure that makes
freedom possible.

Every decision within the system -- type size, image placement, section height -- is made easier by the constraints the grid provides. Rhythm replaces randomness.

04 — System Config

The complete specification table. Every value traces back to the 8px base unit through simple multiplication -- no magic numbers.

Modular Grid System v1.0

Base Unit: 8px

Columns: 4 — Gutter: 24px

Margin: 64px