Swiss Design: das Raster, die Schrift und wie du es heute nutzt

Swiss Design ist der Name, den die meisten für den Internationalen Typografischen Stil verwenden, eine Art, Grafikdesign zu machen, die in den 1950er-Jahren in der Schweiz entstand. Er ordnet jede Seite auf einem Raster, setzt Schrift in klaren Groteskschriften, richtet Text linksbündig aus und entfernt Dekoration, damit der Inhalt schlicht spricht. Das Ergebnis wirkt sachlich, geordnet und leise selbstbewusst, und deshalb folgen so viel modernes Branding, Beschilderung und Interface-Design bis heute seinen Regeln.

Dieser Leitfaden zeigt, woher der Stil kommt, welche Prinzipien du übernehmen kannst, wie du ein Schweizer Raster für echte Formate baust und wie du ein strenges Swiss-Layout auf einen satten Hintergrund setzt, ohne eines von beiden zu verlieren.

Woher der Internationale Typografische Stil kommt

Der Stil wuchs aus der modernistischen Typografie der 1920er- und 1930er-Jahre und nahm in Schweizer Gestaltungsschulen und Ateliers Form an, besonders in Zürich und Basel. Seine Vertreter wollten, dass Design Informationen klar und neutral vermittelt, für jedes Publikum, daher das Wort international.

Ein paar Namen und Schriften lohnt es zu kennen. Josef Müller-Brockmann in Zürich gestaltete Konzert- und Aufklärungsplakate auf sichtbaren Rastern und schrieb später das Buch Rastersysteme für die visuelle Gestaltung, bis heute ein Standardwerk. Emil Ruder, der in Basel Typografie lehrte, schrieb Typographie, ein Lehrbuch über Kontrast, Rhythmus und Raum. Die Schrift kam aus den Grotesken: Akzidenz-Grotesk, eine deutsche serifenlose Schrift aus dem späten 19. Jahrhundert, dann Helvetica und Univers, beide 1957 erschienen.

Die Kernprinzipien von Swiss Design

Swiss Design ist weniger ein Look als eine Reihe von Entscheidungen. Triffst du diese Entscheidungen, wirkt deine Arbeit schweizerisch, auch mit einer modernen Schrift und einem Farbverlauf dahinter.

• Ein Raster unter allem. Spalten, Ränder und Zwischenräume werden zuerst festgelegt, und jedes Element sitzt darauf.
• Serifenlose Schrift. Grotesken mit gleichmäßigem Schriftbild, meist aus einer Familie. Siehe Serif oder Sans Serif.
• Linksbündiger Flattersatz. Text richtet sich an einer Kante aus; zentrierter Satz und Blocksatz sind selten.
• Asymmetrie. Layouts werden durch Gewicht und Raum ausbalanciert, nicht um die Mitte gespiegelt.
• Hierarchie durch Größe, Gewicht und Position. Keine Kästen, Ornamente oder Unterstreichungen, um Wichtigkeit zu zeigen. Siehe visuelle Hierarchie.
• Wenige Farben. Oft Schwarz, Weiß und eine kräftige Farbe, häufig Rot.
• Sachliche Bilder. Fotografien und geometrische Formen statt dekorativer Illustration.
• Raum als Struktur. Leere Flächen sind geplante Teile des Rasters, keine Reste.

So baust du ein Schweizer Raster für echte Formate

Ein Raster sind drei Zahlen: der Rand ringsum, der Zwischenraum zwischen den Spalten und die Zahl der Spalten. Wähle Spaltenzahlen, die sich gut teilen lassen: Sechs Spalten teilen sich in Hälften und Drittel, zwölf in Hälften, Drittel, Viertel und Sechstel. Prüf dann die Rechnung, damit jede Spalte eine ganze Zahl von Pixeln breit ist.

Füge auch ein Grundlinienraster hinzu. Wähle eine kleine Einheit, etwa 8 px bei einem Post mit 1080 px, und mach Zeilenabstände und vertikale Abstände zu Vielfachen davon. Text über mehrere Spalten steht dann auf einer Linie, und das ist ein großer Teil dessen, warum Schweizer Seiten so gesetzt wirken. Zeilenabstand und Zeilenlänge erklärt, wie du die Einheit wählst.

.poster {
  box-sizing: border-box;
  width: 1080px;
  height: 1350px;
  padding: 72px;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: auto 1fr auto;
  column-gap: 24px;
  font-family: "Helvetica Neue", Arial, sans-serif;
}

.poster .kicker { grid-column: 1 / 3; font-size: 24px; line-height: 32px; }
.poster h1 { grid-column: 1 / 6; grid-row: 2; align-self: center; font-size: 112px; line-height: 104px; letter-spacing: -0.02em; font-weight: 700; margin: 0; }
.poster .detail { grid-column: 4 / 7; grid-row: 3; font-size: 36px; line-height: 48px; }

Der Code nutzt CSS Grid Layout. Die Überschrift spannt über fünf Spalten und lässt die sechste bewusst leer; das Detail sitzt unten in der rechten Hälfte, also ist die Seite durch Asymmetrie ausbalanciert statt durch Zentrierung.

Schweizer Typografie-Regeln zum Übernehmen

Das schweizerischste Detail ist die Größenskala. Nutze drei oder vier Größen mit deutlichen Sprüngen, etwa 24, 36 und 112 px bei einem Post mit 1080 px, statt einer sanften Rampe. Große Überschriften sehen meist mit leicht negativer Laufweite besser aus; Laufweite zeigt die Werte.

Wie Swiss Design zu satten Hintergründen passt

Klassische Schweizer Plakate waren oft flächig, aber das Raster verlangt das nicht. Ein strenges Layout ist genau das, was einen satten Hintergrund funktionieren lässt: Die Schrift ist ruhig, ausgerichtet und begrenzt, also kann ein tiefer Farbverlauf die Stimmung tragen, ohne dass die Seite zu Lärm wird. Es ist dasselbe ruhige Layout auf sattem Material, das Minimalismus oder Maximalismus beschreibt.

Drei Regeln halten die Kombination sauber. Setz den Textblock über den ruhigsten Teil des Verlaufs. Nutze eine Textfarbe für alles, meist Weiß oder Schwarz. Und lass die Lichtquelle im Hintergrund in einem leeren Rasterfeld sitzen, damit sie als Teil der Komposition wirkt. Für viel Text über Farbe siehe Schrift auf unruhigen Hintergründen.

In Gradiently rendert ein Mark den Hintergrund live hinter dem Layout und schiebt seinen ruhigsten Bereich hinter die Worte, also behält ein Schweizer Textblock seinen Kontrast, wenn du ihn zwischen Spalten verschiebst oder das Design in andere Größen kopierst.