Швейцарский стиль в дизайне: сетка, гротеск и текст по левому краю
Плакат на модульной сетке, откуда пришёл стиль, семь его инструментов в печати и в вебе, текст по левому краю и иерархия без украшений — с живыми примерами и промптами для картинок.
Коротко
Швейцарский стиль, или интернациональный типографский стиль, появился в Швейцарии в 1950-х и держится на четырёх вещах: модульной сетке, гротеске, тексте по левому краю с рваным правым и иерархии из размера, насыщенности и воздуха вместо цвета и украшений. Композиция асимметрична, фотография объективна, а акцентный цвет обычно один. Его мастера — Йозеф Мюллер-Брокманн, Армин Хофманн и Эмиль Рудер, его шрифты — Akzidenz-Grotesk, Helvetica и Univers. В веб-дизайне стиль живёт в 12-колоночных сетках, плоских интерфейсах и крупных заголовках по левому краю. Он подходит студиям, архитектуре, музеям, технологиям и любому бренду, который хочет выглядеть ясно и уверенно.
Плакат на модульной сетке
Покажите сетку: каждый элемент плаката начинается и заканчивается на её линиях. Шесть колонок, восемь рядов, один промежуток.
На готовом плакате сетки не видно, но она ощущается: края совпадают, промежутки повторяются, пустота выглядит задуманной. В этом главное отличие швейцарского стиля от простого минимализма — порядок здесь не в пустоте, а в системе за ней.
Откуда пришёл швейцарский стиль
International Typographic Style poster for a design week, strict modular grid, asymmetric layout, huge black sans-serif numerals "26", a flush-left headline in a Helvetica-like grotesque, small text set in narrow columns, thin black rules, one flat acid-lime rectangle as the only accent, off-white paper texture, lots of white space, no illustrations, flat print design, sharp, aspect ratio 4:5В 1950-х дизайнеры Цюриха и Базеля — Йозеф Мюллер-Брокманн, Армин Хофманн, Эмиль Рудер — решили сделать дизайн объективным: сначала информация, потом вкус дизайнера. С 1958 года их идеи разносил журнал Neue Grafik, а в 1957-м появились два шрифта, ставшие символами стиля: Helvetica и Univers.
Позже Мюллер-Брокманн описал метод в книге «Модульные системы в графическом дизайне» (1981). Это до сих пор рабочее руководство: сетки большинства современных сайтов ведут своё происхождение от него.
Инструменты стиля — в печати и в вебе
Семь приёмов перешли с плакатов на экраны почти без изменений.
| Приём | В печати | В вебе |
|---|---|---|
| Модульная сетка | колонки и ряды модулей | CSS-сетка на 12 или 6 колонок |
| Гротеск | Akzidenz-Grotesk, Helvetica, Univers | системный гротеск или Inter, Manrope и похожие |
| Левый край | рваный правый край | text-align: start, без растяжки |
| Иерархия | размер, насыщенность, воздух | шкала шрифтов вместо цвета и плашек |
| Асимметрия | крупное смещено, пустота работает | композиция по колонкам, а не по центру |
| Объективное фото | снимок вместо рисунка | предметы без декора, часто чёрно-белые |
| Один акцент | чаще всего красный | один фирменный цвет |
По левому краю
Один и тот же абзац, выровненный тремя способами. Только один сохраняет и ровный край для глаза, и равные пробелы между словами.
Иерархия без украшений
Один и тот же анонс. Слева важность показана цветом, плашками и значками, справа — размером, насыщенностью и воздухом.
Правый вариант читается быстрее: взгляд идёт от крупного к мелкому без остановок. Украшения спорят с содержанием за внимание; размер и воздух просто задают порядок.
Швейцарский стиль в вебе
Website homepage in Swiss International Style for a furniture design studio, desktop screenshot, visible 12-column grid logic, a large flush-left black grotesque headline, small grey sans-serif text in narrow columns, thin hairline rules separating sections, black-and-white cut-out product photos of chairs on white, one acid-lime accent block, generous white space, asymmetric layout, flat 2D UI design, crisp typography, aspect ratio 16:9В вебе стиль нашёл естественный дом: экран — это и так сетка пикселей, а CSS-сетка позволяет задать колонки и ряды так же точно, как макет в типографии. Плоский дизайн 2010-х, дизайн-системы и большинство продуктовых сайтов заимствуют у него — часто сами того не зная.
На телефоне сетка не исчезает: колонки сливаются в одну, но левый край, шкала шрифтов и ритм промежутков остаются — и страница сохраняет характер.
Швейцарский стиль в коде: 2 примера
Модульная сетка с асимметричным первым экраном и типографика, где иерархию делают размер и тонкая линейка.
Модульная сетка
Каждый блок стоит на линиях 12 колонок; на телефоне они сливаются в одну.
/* 12 колонок: содержимое стоит на линиях, а не «на глаз» */
.page {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
column-gap: var(--space-5);
row-gap: var(--space-7);
max-width: 80rem;
margin-inline: auto;
padding-inline: var(--space-5);
}
.hero__label { grid-column: 1 / 4; }
.hero__title { grid-column: 1 / 10; }
.hero__text { grid-column: 7 / 13; } /* асимметрия: текст начинается во второй половине */
.hero__image { grid-column: 1 / 13; }
/* На телефоне те же линии сходятся в одну колонку */
@media (max-width: 47.99rem) {
.page > * { grid-column: 1 / -1; }
}Типографика
Один гротеск, один ровный левый край, тонкая линейка вместо рамки и единственный акцент.
body {
font: 400 1.0625rem/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif;
text-align: start;
hyphens: none;
}
h1 {
font-size: clamp(2.75rem, 7vw, 6rem);
font-weight: 700;
line-height: 0.95;
letter-spacing: -0.03em;
}
.label {
font-size: 0.75rem;
letter-spacing: 0.08em;
text-transform: uppercase;
}
/* Тонкая линейка вместо рамки */
.section + .section {
padding-top: var(--space-5);
border-top: 2px solid currentColor;
}
/* Единственный акцент на странице */
.accent { background: var(--color-accent); }7 правил швейцарского стиля
-
01
Сначала сетка
Колонки, ряды и один промежуток задаются до первого элемента.
-
02
Один гротеск
Разные насыщенности и размеры одного шрифта.
-
03
По левому краю
Рваный правый край, без центровки и растяжки.
-
04
Иерархия размером
Важность показывают размер, насыщенность и воздух, а не цвет.
-
05
Асимметрия
Крупное смещено, пустота его уравновешивает.
-
06
Один акцент
Всё остальное — чёрное, белое и серое.
-
07
Линейки вместо рамок
Разделы разделяет тонкая линия и воздух.
Частые ошибки в швейцарском стиле
-
Helvetica без сетки
Шрифт сам по себе стиль не делает — его делает порядок за ним.
-
Всё по центру
Симметрия делает композицию статичной, а текст — трудным для чтения.
-
Растяжка в узких колонках
Через абзац текут «реки» пробелов.
-
Пять насыщенностей и три шрифта
Иерархия растворяется в шуме.
-
Пустота без системы
Пустое место выглядит дырой, а не паузой.
-
Много акцентных цветов
Строгость исчезает, а вместе с ней и характер.
Вопросы о швейцарском стиле
Что такое швейцарский стиль в дизайне?
Стиль, появившийся в Швейцарии в 1950-х: модульная сетка, гротеск, текст по левому краю, асимметрия и иерархия из размера и воздуха.
Обязательно ли нужна Helvetica?
Нет. Подойдёт любой ясный гротеск: Inter, Manrope, системный шрифт. Сетка и иерархия важнее гарнитуры.
Чем швейцарский стиль отличается от минимализма?
Минимализм убирает лишнее, а швейцарский стиль ещё и строит строгую систему — сетку, шкалу, асимметрию. Он может быть плотным и оставаться швейцарским.
Какую сетку брать для сайта?
12 колонок на компьютере, 6 или 4 на планшете, одна на телефоне — с одним промежутком и полями из шкалы отступов.
Кому подходит швейцарский стиль?
Студиям, архитекторам, музеям, технологическим компаниям и брендам, которые хотят выглядеть ясно, точно и уверенно.
Не устарел ли швейцарский стиль?
Нет: на нём стоит большинство современных интерфейсов. Тренды приходят и уходят поверх него, а сетка остаётся.
Форма
Ясность
по проекту
Проектирую сайты на строгой сетке, с крупным шрифтом и без лишнего — спокойные, точные и лёгкие для чтения. Расскажите о проекте — отвечу в течение рабочего дня.