Szwajcarski styl w projektowaniu: siatka, Helvetica i porządek, który nie wychodzi z mody

Helvetica jest wszędzie. Na dworcu, na opakowaniu leku, na formularzu podatkowym, w logotypach, których nawet nie kojarzysz ze sobą. Patrzysz na nią codziennie, nie zdając sobie z tego sprawy - i właśnie o to chodziło ludziom, którzy ją stworzyli. Litera miała być niewidzialna, a treść miała mówić sama za siebie. Ta idea ma dziś prawie siedemdziesiąt lat i nazywa się szwajcarskim stylem. Co ciekawe, najlepiej widać ją nie na plakacie z lat 50., tylko na ekranie Twojego telefonu.

Bywa nazywany inaczej: międzynarodowy styl typograficzny. Dwie nazwy, jedno zjawisko. Rozwinął się w Szwajcarii w latach 50. XX wieku. W dede projektujemy tym językiem na co dzień, również strony internetowe, bo nigdzie nie sprawdza się tak dobrze jak w webie. Najpierw skąd się wziął, potem konkret: jak budować w tym duchu strony, które są czytelne, szybkie i nie starzeją się po roku.

Krótka historia stylu

Szwajcarski styl wyrósł z awangardy. Z Bauhausu wziął zasadę „form follows function", z holenderskiego De Stijl dyscyplinę geometrii Mondriana, z rosyjskiego konstruktywizmu przekonanie, że projektowanie służy odbiorcy, nie dekoracji (Wikipedia: International Typographic Style). Człowiekiem, który to zebrał, był Ernst Keller (1891-1968), wykładowca zuryskiej Kunstgewerbeschule od 1918 roku. Powtarzał uczniom jedno: rozwiązanie graficzne ma wynikać z treści, nie z gustu projektanta. To zdanie jest fundamentem całej szkoły.

Styl wyrastał z dwóch ośrodków. W Bazylei Armin Hofmann (1920-2020) i Emil Ruder (1914-1970) byli bardziej eksperymentalni, zakochani w samej typografii i kontraście. W Zurychu rządziła logika, a jej twarzą był Josef Müller-Brockmann (1914-1996), który w 1957 roku przejął katedrę po Kellerze. Dla niego projektowanie było bliższe matematyce niż sztuce: siatka, system, mierzalny porządek. To jego dziedzictwo najmocniej widać dziś w webie.

Zasady da się streścić w kilku punktach. Siatka jako fundament każdego układu. Bezszeryfowa, neutralna typografia, bo bohaterem jest treść, nie krój. Asymetria i wyrównanie do lewej z nierówną prawą krawędzią (ragged right), nigdy wyśrodkowanie. Obiektywna fotografia zamiast ozdobnych ilustracji. Biel jako narzędzie porządku i obiektywizm projektanta, który jest neutralnym przekaźnikiem informacji, nie artystą.

Trzy kroje opowiadają tę historię. Akzidenz-Grotesk, XIX-wieczny grotesk, którego pokochali wcześni Szwajcarzy za rzeczowość. Helvetica, projektowana od 1956 przez Maxa Miedingera pod okiem Eduarda Hoffmanna w odlewni Haas pod Bazyleą, wydana w 1957 jako „Neue Haas Grotesk" i przemianowana w 1960 przez Stempel na Helvetica, czyli „szwajcarska". I Univers Adriana Frutigera (projekt 1954, wydanie 1957), pierwsza rodzina z logiczną numeracją wag i szerokości. To historia. Przejdźmy do tego, co z niej wynika dla projektowania stron.

Jak projektować strony w szwajcarskim stylu

Zasady wymyślone dla druku przeniosły się do webu lepiej niż do jakiegokolwiek innego medium. Ekran to siatka. Przeglądarka to maszyna do układania bloków. Szwajcarzy dali nam gotowy język, zanim powstał pierwszy layout CSS.

Siatka, czyli to, co dziś robi CSS Grid. Müller-Brockmann uważał układ modułowy za najczytelniejszy sposób porządkowania informacji i poświęcił mu książkę „Grid Systems in Graphic Design" (1981), wciąż w druku. Kiedy patrzę na jego siatki z lat 60., widzę przodka dwunastokolumnowego gridu, który dziś jest standardem we frontendzie. Strona buduje się na kolumnach i modułach: ustalasz liczbę kolumn, szerokość rynien, max-width treści (zwykle 1200-1400 px), i każdy element dostaje swoje miejsce. CSS Grid i Flexbox to po prostu współczesne narzędzia do tej samej roboty. Do tego dochodzi rytm pionowy - spójne odstępy między sekcjami oparte na jednej jednostce bazowej (np. 8 px), tak żeby strona oddychała równo od góry do dołu. Nic „na oko".

Typografia: mniej krojów, więcej dyscypliny. Bezszeryfowa, neutralna, czytelna. W druku była to Helvetica i Univers, w webie masz Helvetica Now, Neue Haas Grotesk, a z darmowych i świetnie zoptymalizowanych pod ekran - Inter. Arial jako fallback systemowy nikogo nie zawiedzie. Reguła jest prosta: jeden, najwyżej dwa kroje na całą stronę. Hierarchię budujesz rozmiarem i wagą, nie kolorem czy dekoracją. Pomaga skala typograficzna, czyli zestaw rozmiarów w stałej proporcji (np. 16, 20, 25, 31, 39 px), zamiast losowych wartości. Tekst wyrównujesz do lewej, długość wiersza trzymasz w okolicach 60-75 znaków, bo dłuższy męczy oko, a interlinię ustawiasz na 1.5-1.6 dla tekstu ciągłego. To nie są fanaberie, tylko warunki czytelności, które badano dekadami.

Biel jako element aktywny. To najtrudniejsza rzecz do obronienia przed klientem, który mówi „jest tu tyle pustego miejsca, dodajmy coś". Otóż nie. Pusta przestrzeń oddziela, grupuje i buduje hierarchię. Odstęp między sekcjami mówi czytelnikowi, gdzie kończy się jedna myśl, a zaczyna druga, sprawniej niż jakakolwiek linia czy ramka. W webie biel daje też coś praktycznego: stronę, która nie przytłacza na małym ekranie. Mniej elementów na widoku to mniej decyzji dla użytkownika.

Kolor oszczędnie, jeden akcent. Neutralna baza, czyli czerń, biel i kilka szarości, plus jeden kolor akcentowy. U nas w dede jest to pomarańcz. Akcent pełni funkcję, nie zdobi: pokazuje, co kliknąć, co jest ważne, gdzie prowadzi droga przez stronę. Kiedy wszystko jest kolorowe, nic nie jest wyróżnione. Jeden mocny kolor na neutralnym tle działa lepiej niż tęcza.

Obiektywna fotografia zamiast stockowych ozdóbek. Szwajcarzy zamienili ilustracje na rzeczowe zdjęcie pokazujące fakt. W webie znaczy to: prawdziwe zdjęcia produktu, zespołu, realizacji, traktowane jak bloki w siatce, a nie generyczne stocki z uśmiechniętymi ludźmi w garniturach. Zdjęcie wpięte w moduł, z tym samym rytmem co reszta, robi więcej niż dziesięć ikonek i gradientów.

Dlaczego ten styl wygrywa w webie

Decydują argumenty twardsze niż estetyka.

Czytelność. Strona oparta na siatce, z jednym krojem i wyraźną hierarchią, prowadzi oko od najważniejszego do szczegółu. Użytkownik znajduje to, czego szuka, szybciej, a to przekłada się na konwersję.

Szybkość. Mało ozdób oznacza lekki kod. Brak ciężkich animacji, dziesiątek grafik tła i bibliotek do efektów to lepsze Core Web Vitals, czyli wyniki, które Google bierze pod uwagę w rankingu. Minimalizm szwajcarski i wydajna strona idą w parze niejako z natury.

Dostępność. Czysta struktura, mocny kontrast i jasna hierarchia to dokładnie to, czego wymaga WCAG. Projekt, który od początku stawia na porządek i czytelność, jest bliżej zgodności z normami dostępności niż projekt obwieszony efektami. A dostępność to dziś nie miły dodatek, tylko wymóg, również prawny.

Responsywność. Siatka modułowa skaluje się naturalnie. To, co na desktopie ma cztery kolumny, na telefonie ma jedną, bo moduły po prostu układają się jeden pod drugim. Projektowanie mobile-first, które jest dziś standardem, to w gruncie rzeczy myślenie w modułach Müller-Brockmanna.

Ponadczasowość. Gradienty, glow, modne fonty zestarzeją się w dwa, trzy lata. Czysty układ oparty na zasadach z lat 50. wygląda dobrze dekadę później. Redesign kosztuje, więc strona, która nie wychodzi z mody, to oszczędność.

Najlepszy dowód mają największe firmy świata. Apple buduje swoje strony na siatce, bieli i bezszeryfowej typografii od lat. Stripe zrobił z czystego, modułowego layoutu znak rozpoznawczy. Linear i Vercel pokazują, że minimalizm potrafi wyglądać nowocześnie i ostro. Strona nowojorskiej MoMA czy portfolia poważnych studiów projektowych grają tym samym językiem. To nie przypadek, że firmy, którym zależy na powadze i zaufaniu, sięgają właśnie po szwajcarski porządek.

Gdzie ten styl zawodzi i jak go nie zepsuć

Szwajcarskiemu stylowi zarzucano chłód, bezosobowość i monotonię, i w webie ten zarzut wraca ze zdwojoną siłą. Łatwo zrobić stronę, która jest poprawna, czysta i kompletnie bez wyrazu. Internet pełen jest identycznych „minimalistycznych" landingów, które zlewają się w jedną szarą masę. Bunt przeciw sztywnym regułom przyszedł już w latach 70., gdy w Bazylei Wolfgang Weingart zaczął łamać siatkę i mieszać wielkości, dając początek nurtowi New Wave. To była zdrowa reakcja.

Wniosek dla projektanta stron jest taki: trzymaj dyscyplinę, ale nie bój się charakteru. Mocny akcent kolorystyczny, typografia z osobowością tam, gdzie pasuje, dobra fotografia zamiast pustki, odrobina mikroruchu przy interakcji. Szwajcarska siatka jest fundamentem, na którym budujesz, a nie kaftanem, który Cię krępuje. Najlepsze strony łączą porządek z odrobiną odwagi.

Tak projektujemy w dede

Naszą własną stronę dede.agency przeprojektowaliśmy dokładnie w tym duchu: siatka, dużo bieli, mocna typografia, jeden pomarańczowy akcent. Nie dlatego, że to modne, tylko dlatego, że to działa. Tak samo podchodzimy do stron klientów, a są to głównie firmy z sektora B2B, gdzie komunikat ma być jasny, profesjonalny i spójny. W tym świecie czytelność i porządek biją efekciarstwo za każdym razem.

Jeśli Twoja strona jest przeładowana, wolno się ładuje albo po prostu wygląda jak setka innych, problemem nie jest brak kolejnego efektu. Problemem jest brak systemu. A system to dokładnie to, co Szwajcarzy wymyślili lepiej niż ktokolwiek przed nimi. Porozmawiajmy, jeśli chcesz to uporządkować.

Źródła

Daty, nazwiska i fakty historyczne w tym wpisie opieram na poniższych opracowaniach (część z nich jest też podlinkowana bezpośrednio w tekście):

• Wikipedia: International Typographic Style
• Wikipedia: Helvetica
• Wikipedia: Josef Müller-Brockmann
• Wikipedia (DE): Ernst Keller
• Wikipedia: Wolfgang Weingart
• PRINT Magazine: Swiss Style - The Principles, the Typefaces & the Designers
• About Switzerland (EDA): Swiss Style forever
• MasterClass: Swiss Design - 5 Elements
• Smashing Magazine: Lessons From Swiss Style Graphic Design