Swiss Grid Style Kit

Putting the Grid to Work: Practical Principles

The Swiss or International Typographic Style grew out of design work in Switzerland in the mid-twentieth century, and its lasting strength is that it treats a page as a system rather than a canvas. Before any content is placed, the designer decides on columns, margins, gutters and a baseline rhythm. Everything that follows (headings, product photos, prices, captions) snaps to that structure. The result looks calm because the decisions were made once, not repeatedly.

Start with columns and margins

A twelve-column grid is a flexible starting point for web layouts because it divides cleanly into halves, thirds and quarters. For a small catalogue page, a product card might span three columns on a wide screen, six on a tablet and the full width on a phone. Keep gutters consistent across breakpoints and let outer margins breathe; generous white space is not wasted space, it is what makes the grid visible.

Set a typographic hierarchy

• One typeface family is usually enough. Sans-serifs in the tradition of Helvetica or Akzidenz-Grotesk suit the style, but any clear, neutral face works.
• Limit sizes to three or four steps, for example body, subheading, heading and display.
• Align left, ragged right. Flush-left text with uneven line endings is a hallmark of the style and reads more naturally on screens than justified text.
• Use a baseline grid so that line heights and spacing share a common unit, such as multiples of 8 pixels.

Let content carry the colour

Swiss layouts traditionally rely on black, white and one strong accent, often red. On a shop page this means product photography provides most of the colour, while the interface stays quiet. Use the accent sparingly for actions and key information so it keeps its meaning.

Test with real material

A grid only proves itself with actual content: long product names, missing images, Hungarian words with accents and compound lengths. Fill your layout with realistic text early, check it on a narrow phone screen and adjust column spans rather than breaking the grid. You can see how these ideas shape our own listings in the shop, and find related practical notes among the other guides.