Swiss

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. Color is not a hierarchy device: if the interface were rendered in grayscale, the reading order would be unchanged.

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.

Recommendations

• Define the grid first and write it down: how many columns, what gutter, what baseline unit. Every element you place afterward should begin and end on a column edge, and every vertical space should be a multiple of the baseline unit.
• Use one sans-serif family for everything. Neo-grotesque faces suit this direction because they are neutral enough to disappear behind the structure. Build hierarchy from three or four sizes and two weights, not from a second family.
• Set text flush left with a ragged right edge. Avoid justified text, which creates uneven word spacing, and avoid centered blocks, which have no grid position.
• Compose asymmetrically. A block of text in the left two columns with the remaining four empty is more Swiss than the same block centered — the grid is what makes the emptiness feel placed rather than left over.
• Treat photography as a grid element: crop images to a whole number of columns, and leave them untreated. No filters, no color overlays, no gradient scrims.
• Let hierarchy survive without color. Assign emphasis through size, weight, and position, then check the result in grayscale. If something becomes ambiguous, fix the typographic hierarchy rather than reintroducing color.
• Keep rules and lines structural. A horizontal rule should mark a real division in the grid, not decorate a section header.

Avoid

• A second typeface family introduced for contrast or personality.
• Centered or justified body text.
• Color used to distinguish levels of a hierarchy that size and position should be carrying.
• Elements positioned by eye, sitting between column edges.
• Photographic treatments: duotone, gradient overlay, heavy vignette, decorative masking.
• Arbitrary vertical spacing that does not resolve to the baseline unit.

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? 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, color is carrying hierarchy that typography should carry.
• How many typeface families are actually rendering? If the answer is more than one, decide which one 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 centered rather than composed, and the grid is doing nothing.

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; color 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.

Core principles

• The grid precedes the composition. Columns, gutters, and a baseline unit are defined before any element is placed, and everything resolves to them.
• One typographic voice. A single sans-serif family expresses every level of hierarchy; contrast comes from scale and weight, not from a second family.
• Hierarchy without color. 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 and rules appear as themselves, cropped and positioned by the grid rather than styled.

Visual characteristics

• A visible underlying column structure, with content blocks starting and ending on column edges.
• One neutral sans-serif family at a small number of sizes and two or three weights.
• Text set flush left with a ragged right edge.
• Asymmetric composition with unequal left and right margins.
• Color 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.

Rules

1. Declared column grid. Every content block begins and ends on a column edge of a documented grid. Acceptance criterion: Measuring the left and right edge offsets of every content block resolves them to a finite set of column positions from the declared grid, with no block landing between edges.

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. Hierarchy survives grayscale. Emphasis is carried by size, weight, and position rather than by color. Acceptance criterion: Rendering the page in grayscale leaves the reading order unchanged, and the number of distinct computed text colors is 2 or fewer.

4. Flush-left text. Body copy and headings are set flush left with a ragged right edge. Acceptance criterion: The computed text-align of every paragraph and heading is left or start; no text block computes to justify or center.

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

6. 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.

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

Avoid

• A second typeface family introduced for contrast or personality.
• Justified or centered body text.
• Color used to separate hierarchy levels that size and position should establish.
• Elements positioned optically, landing between column edges.
• Duotone, gradient scrim, vignette, or decorative masking on photography.
• Vertical spacing values that do not resolve to the baseline unit.

Acceptance criteria

• Rule 1: Every content block starts and ends on a declared column edge.
• Rule 2: Exactly one typeface family renders across the interface.
• Rule 3: Reading order is unchanged in grayscale and at most 2 text colors are used.
• Rule 4: All paragraphs and headings compute to flush-left alignment.
• Rule 5: Left and right margins of the main content block differ by at least one column.
• Rule 6: All vertical spacing is an integer multiple of the baseline unit.
• Rule 7: No content image carries a filter or overlay, and each spans whole columns.

Blocking failures

• No grid is declared, so column 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.
• Color is the only mechanism distinguishing a hierarchy level, so the structure collapses in grayscale or for a color-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

• 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 in the reduced grid (Rule 1).
• The baseline unit may shrink proportionally, but vertical spacing continues to resolve to whole multiples of whichever unit is active (Rule 6).
• Asymmetry (Rule 5) may weaken as the column count falls and must be evaluated per breakpoint; at a two-column grid, a one-column offset satisfies the rule.
• Images re-crop to a whole number of columns in the reduced grid rather than scaling to an arbitrary fraction of the viewport (Rule 7).
• The single-family (Rule 2) and flush-left (Rule 4) rules hold unchanged at every breakpoint.