Swiss / International Editorial Grid

When to use this

• You are designing an editorial or long-form content page and need a strong grid system.
• You want asymmetric column layouts where content placement creates visual tension and hierarchy.
• You need a baseline grid that aligns text across columns.
• You want white space to function as an active design element, not just padding.
• Do NOT use this when you need mosaic/bento-box card layouts; use bento-grid-layouts instead.

Mental model

The Swiss/International Typographic Style (developed in the 1950s at Basel and Zurich) is built on three principles: the grid as organizing structure, type as the primary visual element, and objective presentation over decoration.

The grid is not a convenience tool. It is the design. Every element derives its position and size from the grid intersections. A 12-column grid is the most common but Swiss design frequently uses asymmetric grids (5+7, 4+8, 3+5+4) where the unequal column groups create intentional hierarchy. The wider column carries primary content. The narrow column holds secondary material, captions, or deliberate emptiness.

A baseline grid aligns all text across the page to a consistent vertical rhythm. If the body line-height is 24px, every heading, paragraph, caption, and image height should be a multiple of 24px. This creates horizontal "rails" that hold the page together visually, even when content types vary. CSS cannot enforce a true baseline grid natively, but you can approximate it with consistent line-height and margin/padding values that are multiples of the baseline unit.

White space in Swiss design is not empty; it is a structural element. A half-page left blank is a deliberate composition choice that directs the eye to the content that does exist. This is the opposite of the "fill every pixel" instinct.