Applying a Swiss visual direction

You are being asked to apply a Swiss visual direction to a web interface. This document gives you framing and recommendations for that direction. It does not tell you what page, product, or feature to build — apply the guidance below to whatever interface you are already working on, at whatever scope that work requires.

What “Swiss” means here

Swiss design — also called the international typographic style — treats layout as a system rather than a composition. Before anything is placed, a grid is defined; everything afterward is positioned by that grid, and the grid remains legible in the finished result. Typography does the expressive work through size, weight, and position, using a single neutral sans-serif rather than a pairing. Colour is not a hierarchy device: if the interface were rendered in grayscale, the reading order would be unchanged.

The style is impersonal by intent. Its own designers held that the design should be as invisible as possible and the designer’s subjectivity pushed aside, so the material communicates without the interference of whoever arranged it. Nothing on a Swiss page is a signature. That is what separates it from Editorial, which pairs two families, merely uses a grid rather than showing one, and carries a byline.

The common misreading is that Swiss means sparse. It does not. A Swiss page can be extremely dense — full of text, tables, and images — and still be Swiss, because what defines it is the system, not the amount of material. Restraint applies to the number of decisions, not to the amount of content. Emptiness, when it appears, is allocated: a void is a measured region of the grid, not the space left after removing things.

A working order

The order matters more here than in any other direction, because Swiss is the one style where the structure is decided before the content is seen.

1. Declare the grid, in writing, first. How many columns, what gutter, what side margins, what row unit, what baseline. Write it down before opening a layout tool. If you cannot state it in one sentence, it is not a system yet.
2. Declare the type scale next. One neo-grotesque family, three or four sizes, two or three weights. Fix them now so that later hierarchy problems are solved by choosing among them rather than by inventing a new size.
3. Assign every piece of content a level in that scale before placing anything. Levels first, positions second.
4. Place the largest blocks against the grid, asymmetrically. Decide which columns stay empty as a deliberate act — the void is part of the composition and gets allocated now, not discovered later.
5. Place the remaining material, each block starting and ending on column edges and beginning on a row line. Both axes, not just the horizontal one.
6. Add rules only where a division already exists in the structure you just built.
7. Verify, then correct upstream. When something does not read, fix the scale or the placement. Do not introduce colour, a second family, or an off-grid nudge — those are the three ways this direction is usually lost.

Recommendations

• Use one sans-serif family for everything, and make it a neo-grotesque — the lineage of Akzidenz-Grotesk, Univers, and Helvetica. “Any neutral sans” is too loose: a geometric face like Futura or a humanist like Gill Sans will read as another style entirely, however disciplined the grid beneath it is.
• Constrain both axes. A column grid alone lets a block start at an arbitrary height while still passing every horizontal check; declare row lines and start blocks on them.
• Set text flush left with a ragged right edge. The ragged edge is not the point — even word spacing is. Justified setting reaches its flush right edge by stretching the spaces between words, which produces rivers of white running down the column.
• Compose asymmetrically. A block of text in the left two columns with the remaining four empty is more Swiss than the same block centred — the grid is what makes the emptiness feel placed rather than left over.
• Choose photographs the way a document does: documentary, not atmospheric. Every image should have a subject the adjacent text names. Then crop it to a whole number of columns and leave it untreated — no filters, no colour overlays, no gradient scrims.
• Let hierarchy survive without colour. Assign emphasis through size, weight, and position, then check the result in grayscale. If something becomes ambiguous, fix the typographic hierarchy rather than reintroducing colour.
• Keep rules structural. A horizontal rule should mark a real division in the grid, not decorate a section header.
• On the web, redeclare the grid at each breakpoint rather than stretching one system across all widths. A fixed canvas has one grid; a fluid one has a small number of declared grids and named widths where it swaps between them.

Avoid

• A second typeface family introduced for contrast or personality.
• A geometric or humanist sans standing in for a neutral one.
• Centered or justified body text, and any setting that varies word spacing to reach a flush right edge.
• Colour used to distinguish levels of a hierarchy that size and position should be carrying.
• Elements positioned by eye, sitting between column edges or between row lines.
• Photographic treatments: duotone, gradient overlay, heavy vignette, decorative masking.
• Mood or atmosphere photography with no named subject, however untreated it is.
• Rules that underline a heading rather than divide the grid.
• Arbitrary vertical spacing that does not resolve to the baseline unit.
• A byline, a signature, or any other mark of authorship. That is Editorial.
• Reaching emptiness by deleting content rather than by allocating grid fields. That is Minimalist.

How to check your own work

Before considering the result finished, look at it and ask:

• Can I overlay the grid on a screenshot and see every element land on a column edge and a row line? Anything that does not is either misplaced or an undeclared exception.
• If I render the page in grayscale, does the reading order stay the same? If it does not, colour is carrying hierarchy that typography should carry.
• How many typeface families are actually rendering, and is the one that remains a neo-grotesque? If more than one renders, decide which is doing real work and remove the other.
• Are the left and right margins of the main content block different? If they are identical, the composition is centred rather than composed, and the grid is doing nothing.
• Pick any empty region and measure it. Does it come out to a whole number of columns and row units? If not, it is residue rather than a void.
• For each image, can I point to the words that say what it shows? If I cannot, it is decoration and it goes.
• Could a reader tell who designed this? If yes, something on the page is a signature and it should not be there.

Swiss — Specification

Definition

Swiss is a web-interface design style in which a declared modular grid governs every placement decision and remains legible in the finished result. A single neutral sans-serif carries the entire typographic hierarchy through size, weight, and position; colour plays no structural role. The style is defined by the presence of a system, not by the quantity of content, so a dense page and a sparse page can both be Swiss.

The system is impersonal on purpose. The movement’s own formulation is that the design should be as invisible as possible and the designer’s subjectivity pushed aside, so that the material communicates without the interference of whoever arranged it. That is what separates Swiss from its two closest neighbours. It is not Editorial: Editorial pairs two contrasting families, merely uses a grid rather than exhibiting one, and is signed — a byline is one of its rules — where a Swiss page is deliberately anonymous. It is not Minimalist either: Minimalist removes material until little is left, while Swiss will accept a page dense with text, tables, and images provided every part of it resolves to the grid. Restraint here applies to the number of decisions, never to the amount of content.

One caution comes from the movement’s own strictest text. Müller-Brockmann, having written the book that codified the grid, held that the grid system is an aid and not a guarantee — it permits many uses, and a designer still has to find the solution the material needs. The rules below constrain how a system is declared and honoured; they do not choose the system.

Core principles

• The grid precedes the composition. Columns, rows, gutters, and a baseline unit are defined before any element is placed, and everything resolves to them.
• The designer is absent. Presentation is objective and impersonal; nothing on the page is a signature, and the structure is what the reader perceives rather than a personality.
• One typographic voice. A single neutral sans-serif family expresses every level of hierarchy; contrast comes from scale, weight, and position, not from a second family.
• Hierarchy without colour. Reading order survives in grayscale because size and position, not hue, establish emphasis.
• Asymmetry as structure. Balance is achieved through deliberate unequal distribution across the grid rather than through centering.
• Untreated material. Photography is documentary rather than emotive — cropped and positioned by the grid, presented as evidence rather than as atmosphere.

Visual characteristics

• A visible underlying modular structure, with content blocks starting and ending on both column edges and row lines.
• One neo-grotesque sans-serif family — the lineage of Akzidenz-Grotesk, Univers, and Helvetica — at a small number of sizes and two or three weights.
• Text set flush left with a ragged right edge, holding word spacing even across every line.
• Asymmetric composition with unequal left and right margins.
• Documentary photography cropped to whole column widths, without filters or overlays.
• Horizontal rules marking real structural divisions rather than decorating headings.
• Vertical spacing that resolves to a single baseline unit throughout.
• Large deliberate voids that read as placed, because they are measured in whole grid fields rather than left over.

Rules

1. Declared modular grid. Every content block begins and ends on a column edge of a documented grid, and its top edge begins on a declared row line of that same grid. Acceptance criterion: Measuring the left, right, and top edge offsets of every content block resolves each to a finite set of positions from the declared grid, with no block landing between column edges or between row lines.

2. Single typeface family. The entire interface uses one sans-serif family. Acceptance criterion: Collecting the computed font-family values across every rendered text node yields exactly one family.

3. A neutral sans, not merely a single one. That family is a neo-grotesque or grotesque — the Akzidenz-Grotesk, Univers, and Helvetica lineage — rather than a geometric, humanist, or display sans. Acceptance criterion: The rendered family is named in a declared shortlist of grotesque and neo-grotesque faces, and its lowercase a is double-storey and its terminals are horizontal.

4. Hierarchy survives grayscale. Emphasis is carried by size, weight, and position rather than by colour. Acceptance criterion: Rendering the page in grayscale leaves the reading order unchanged, and the number of distinct computed text colours is 2 or fewer.

5. Flush-left text with even word spacing. Body copy and headings are set flush left with a ragged right edge, so that word spacing stays constant on every line. Acceptance criterion: The computed text-align of every paragraph and heading is left or start, no text block computes to justify or center, and measuring the inter-word gaps within any paragraph yields a single value across all of its lines.

6. Asymmetric composition. The optical axis of the layout does not coincide with the centre of the viewport. Acceptance criterion: The measured left and right margins of the main content block differ by at least one full column width.

7. Grid-derived spacing. Vertical rhythm follows the declared baseline unit. Acceptance criterion: Every vertical margin and padding value in the layout is an integer multiple of the documented baseline unit.

8. Untreated photography. Images are cropped by the grid and presented without decorative treatment. Acceptance criterion: No content image has a CSS filter or a colour overlay, and each image’s rendered width equals a whole number of columns plus their intervening gutters.

9. Documentary imagery. Every content image depicts the subject the adjacent text is about. Images chosen for mood, atmosphere, or general appeal are not used. Acceptance criterion: For each content image, a specific referent is named in the adjacent text or in its caption; an image whose referent cannot be named is a decoration and is removed.

10. Structural rules only. Every horizontal or vertical rule marks a division that exists in the grid. Acceptance criterion: Each rendered rule aligns to a declared column edge or row line and separates two content regions; a rule that only underlines a heading is a defect.

11. Measured voids. Empty regions are whole grid fields rather than residual space. Acceptance criterion: Every empty region larger than one baseline unit measures a whole number of columns wide and a whole number of row units tall.

Avoid

• A second typeface family introduced for contrast or personality.
• A geometric or humanist sans standing in for a neutral one, which reads as another style entirely however disciplined the grid beneath it is.
• Justified or centered body text, and any setting that varies word spacing to reach a flush right edge.
• Colour used to separate hierarchy levels that size and position should establish.
• Elements positioned optically, landing between column edges or between row lines.
• Duotone, gradient scrim, vignette, or decorative masking on photography.
• Atmospheric or mood photography with no named subject, however untreated it is.
• Rules used to decorate a heading rather than to mark a division in the grid.
• Vertical spacing values that do not resolve to the baseline unit.
• A byline, a signature, a personal voice, or any other mark of authorship, which belongs to Editorial rather than here.
• Emptiness produced by removing content rather than by allocating grid fields, which is Minimalist rather than here.

Acceptance criteria

• Rule 1: Every content block starts and ends on a declared column edge and begins on a declared row line.
• Rule 2: Exactly one typeface family renders across the interface.
• Rule 3: That family is a grotesque or neo-grotesque, not a geometric or humanist sans.
• Rule 4: Reading order is unchanged in grayscale and at most 2 text colours are used.
• Rule 5: All paragraphs and headings compute to flush-left alignment with constant word spacing.
• Rule 6: Left and right margins of the main content block differ by at least one column.
• Rule 7: All vertical spacing is an integer multiple of the baseline unit.
• Rule 8: No content image carries a filter or overlay, and each spans whole columns.
• Rule 9: Every content image has a referent named in adjacent text or caption.
• Rule 10: Every rule aligns to the grid and separates two content regions.
• Rule 11: Every empty region measures a whole number of columns and row units.

Blocking failures

• No grid is declared, so column and row positions cannot be verified and every placement is an isolated judgment.
• Two or more typeface families render across the interface, dissolving the single typographic voice the style depends on.
• Colour is the only mechanism distinguishing a hierarchy level, so the structure collapses in grayscale or for a colour-blind reader.

These conditions make the work unacceptable to ship; they are not stylistic suggestions and are not subject to designer discretion.

Responsive adaptation guidance

No source examined describes this style at fluid width — the entire literature composes on a fixed canvas, and the poster is its native format. What follows is reasoned from the rules rather than cited, and should be read as this catalogue’s position rather than as the movement’s.

• The column count reduces at narrower viewports — for example six columns to four to two — but the grid is never abandoned; every block still resolves to a column edge and a row line in the reduced grid (Rule 1).
• The grid is redeclared at each breakpoint, not stretched between them. A fixed canvas has one system; a fluid one has a small number of declared systems and named widths at which it changes from each to the next. A grid that interpolates continuously is not declared and cannot be verified.
• The baseline unit may shrink proportionally, but vertical spacing continues to resolve to whole multiples of whichever unit is active (Rule 7).
• Asymmetry (Rule 6) weakens as the column count falls and must be evaluated per breakpoint; at a two-column grid, a one-column offset satisfies the rule. Below two columns asymmetry is unachievable, and a single-column layout is an honest reduction rather than a violation.
• Voids (Rule 11) are the first thing a narrow viewport destroys, because a whole empty column is unaffordable at small widths. They reduce to whole row units — horizontal bands — rather than disappearing.
• Images re-crop to a whole number of columns in the reduced grid rather than scaling to an arbitrary fraction of the viewport (Rule 8).
• The single-family (Rule 2), neutral-face (Rule 3), and flush-left (Rule 5) rules hold unchanged at every breakpoint.