typographyMay 10, 202612 min read

Принципы полиграфического дизайна, которые должен перенять каждый дизайнер.

Дизайнеры печатной продукции решили задачи иерархии, сетки, ритма и сдержанности еще десятилетия назад. Вот каноническое руководство о том, что следует перенять цифровым дизайнерам в 2026 году.

By Boone
XLinkedIn
what print designers got right

Дизайнеры печатной продукции разобрались почти со всеми проблемами, с которыми вы сталкиваетесь на экране. Они сделали это ещё до вашего рождения, с меньшими бюджетами, с худшими инструментами и с беспощадной дисциплиной дедлайна, который сходил с печатного станка в три часа ночи.

Каждая волна цифрового дизайна медленно и неумело переосмысливает их работы. Мы изобретаем новую систему сеток каждые пять лет. Мы переименовываем иерархию в «визуальный вес» и делаем вид, что это новинка. Мы спорим о пустом пространстве, как будто это презентация стартапа.

В этой области уже решено большинство этих проблем. Работа лежит в переплетенном экземпляре журнала Wired 1995 года или в мягкой обложке Penguin 1947 года, ожидая, когда вы действительно её посмотрите. Печать — это не музей. Это действующая библиотека, в которую вы можете войти, взять то, что вам нужно, и выйти.

Почему печать решила это первой, и мы продолжаем об этом забывать

У печати были ограничения, от которых цифровая печать до сих пор делает вид, что свободна. Страница — это фиксированный холст. Печать и доставка разворота журнала стоят реальных денег.

Каждое решение имело свою цену, и эта цена заставляла редакторов проявлять сдержанность. Дизайнерам печатной продукции приходилось бороться за внимание читателя не с TikTok, а с очередным разворотом. Конкуренция была честной. Инструменты ограничивались шрифтом, изображением, цветом, бумагой и сеткой.

С помощью этих пяти элементов Массимо Виньелли создал фирменный стиль Unimark для American Airlines. Паула Шер создала самые культовые плакаты Pentagram. Вим Кроувел разработал визуальный язык Стеделийкского музея. Пять инструментов, десятилетия канона.

У цифровых дизайнеров тысяча инструментов, и большинство из нас до сих пор не может создать целевую страницу, которая уважает своего читателя. Ограничение не в инструментах. Ограничение в том, что никто не заставлял нас изучать канон.

Семь принципов, которые удалось освоить в печатной продукции

Отбросьте романтику, и вы получите семь принципов, которые идеально подходят для печатной продукции, но с которыми цифровые технологии продолжают спотыкаться.

  1. Иерархия. Одна вещь является главной. Всё остальное служит главной цели.

  2. Сетка. Сетка — это договор с читателем, а не клетка для дизайнера.

  3. Ритм. Страница за страницей должна ощущаться как музыкальное произведение, а не как игровой автомат.

  4. Масштаб. Большие вещи велики, потому что они этого заслужили, маленькие вещи тоже малы, потому что они этого заслужили.

  5. Контраст. Толщина шрифта, цвет, плотность, масштаб. Контраст — это то, как движется взгляд.

  6. Сдержанность. Большинство решений — это решения об удалении, а не о добавлении.

  7. Уважение к читателю. Время, внимание и интеллект читателя — это бюджет, который вы тратите.

Эти семь принципов лежат в основе каждого великого печатного произведения. Они встречаются в мягкой обложке Penguin эпохи Чихольда и на обложке Bloomberg Businessweek под руководством Ричарда Турли. Они встречаются так же на карте метро Виньелли и во вступительной заставке статьи в New York Times Magazine. Названия меняются, принципы остаются неизменными.

Воксельная структура: семь карточек с надписями ИЕРАРХИЯ, СЕТКА, РИТМ, ШКАЛА, КОНТРАСТ, СДЕРЖИВАНИЕ, УВАЖЕНИЕ, расположенные подобно лотку принтера на мягкой пастельно-коралловой и кремовой поверхности.
Воксельная структура: семь карточек с надписями ИЕРАРХИЯ, СЕТКА, РИТМ, ШКАЛА, КОНТРАСТ, СДЕРЖИВАНИЕ, УВАЖЕНИЕ, расположенные подобно лотку принтера на мягкой пастельно-коралловой и кремовой поверхности.

Иерархия и сетка: выберите главный элемент, привяжите его к контракту

Откройте любой номер Bloomberg Businessweek времен Ричарда Терли, примерно с 2010 по 2014 год. На каждом развороте есть один главный элемент. Главный элемент огромен, вспомогательный текст мелкий, изображение либо кричит, либо шепчет, и нет никакой путаницы, с чего начать.

Сравните это с типичной маркетинговой страницей SaaS в 2026 году. Главный заголовок, бровь, подзаголовок, три пункта списка, отзыв и градиентный блок — все они стремятся стать главным элементом. Ни один из них им не является. Читатель уходит.

Решение для печатной версии — жесткое. Посмотрите на свой экран, спросите себя, какой единственный элемент является главным, а затем сделайте все остальные элементы заметно меньше, светлее или тише. Если два элемента конкурируют, у вас нет иерархии. У вас шум, замаскированный под иерархию.

Главная идея должна где-то оказаться. И этим «где-то» является сетка. Ян Чихольд в конце 1940-х годов перестроил линейку книг в мягкой обложке издательства Penguin, используя настолько дисциплинированную сетку, что книги до сих пор выглядят современно.

Вим Кроувел сделал то же самое для голландского городского дизайна. Массимо Виньелли внедрил систему Unigrid во все брошюры Службы национальных парков США, и эти брошюры до сих пор печатаются, до сих пор читабельны, до сих пор красивы, спустя пятьдесят лет.

Сетка — это не двенадцатиколоночная структура, которая поставляется с вашим фронтенд-фреймворком. Сетка — это гарантия того, что заголовки начинаются с одного и того же места, что подписи располагаются в известной колонке, что промежутки между строками не смещаются, что глаз может доверять странице. Читатель не видит сетку. Читатель чувствует её.

Большинство цифровых продуктов не имеют сетки. У них есть макет, который пережил последний обзор дизайна. Это не одно и то же.

Ритм и масштаб: проектируйте вторую страницу, заслужите размер

Дизайнер печатной продукции мыслит разворотами, а не страницами. Арт-директор журнала планирует, как начинается, развивается, ускоряется и завершается статья, подобно тому, как монтажер фильма монтирует сцену. Журнал Wired в эпоху Карсона и Планкетта был известен этим. Каждая статья была песней, а не отдельной нотой.

Цифровой дизайн в подавляющем большинстве случаев мыслит отдельными экранами. Главный герой получает сто часов внимания, вторая прокрутка — пятнадцать минут, третья — ни минуты. А потом мы удивляемся, почему наши маркетинговые страницы проваливаются ниже линии сгиба.

Воспользуйтесь этим приемом. Нарисуйте всю страницу как последовательность ударов. Если вы не можете описать ритм вслух, значит, у страницы его нет.

Масштаб — громкий родственник ритма. Плакаты Паулы Шер для Public Theater — это урок масштаба. Шрифт заполняет плакат, обрезанный по краям, одна толщина шрифта делает всю работу.

Размер — это сообщение. Вы читаете шрифт, потому что шрифт — это пространство.

В цифровом дизайне крупный шрифт часто используется скорее для создания атмосферы, чем для выражения идеи. Заголовки размером в сорок восемь пикселей, гласящие «Добро пожаловать на платформу, которая расширяет возможности вашей команды», большие не потому, что они этого заслужили. Они большие потому, что система дизайна выпустила токен display-xl, и кто-то его использовал.

Правило печати простое. Если шрифт большой, то слова внутри него должны стоить этого места. Либо слова заслуживают такого размера, либо размер уменьшается. Третьего варианта нет.

Пять цифровых грехов, которые можно исправить с помощью принципов печати

Сравнительный анализ пяти небольших цифровых экранов, демонстрирующий распространенные ошибки дизайна: одинаковый размер всего, отсутствие четкой линии перехода, декоративных элементов больше, чем структуры, слишком много шрифтов, слишком много хрома, мягкие пастельные коралловые и кремовые тона на темном фоне.
Сравнительный анализ пяти небольших цифровых экранов, демонстрирующий распространенные ошибки дизайна: одинаковый размер всего, отсутствие четкой линии перехода, декоративных элементов больше, чем структуры, слишком много шрифтов, слишком много хрома, мягкие пастельные коралловые и кремовые тона на темном фоне.

Большинство плохих цифровых дизайнов — это одна из пяти повторяющихся ошибок. Для каждой из них существует принцип печати, который исправляет её при первом же контакте.

| Принцип печати | Распространенный цифровой грех | Исправление |

|---|---|---|

| Иерархия | Всё одинакового размера, ничего не отводит | Выберите один отвод, остальное заметно уменьшите |

| Сетка | Декоративная компоновка, отсутствие базовой структуры | Установите настоящую сетку, выровняйте по ней каждый элемент, без исключений |

Сдержанность | Слишком много шрифтов, слишком много декоративных элементов | Ограничьте количество шрифтов двумя, уберите границы, тени, градиенты, которые не работают |

Масштабирование | Крупный шрифт со слабыми словами | Сделайте так, чтобы слова соответствовали размеру, или уменьшите шрифт |

Контраст | Плоский серый интерфейс без привязки | Добавьте реальный контраст толщины, реальную цветовую привязку, реальное изменение плотности |

Прочитайте таблицу один раз, а затем прочитайте свой собственный продукт. Вы обнаружите как минимум три из этих грехов на экране, который вы выпустили в этом месяце. Это нормально, они есть почти у всех. Смысл в том, чтобы назвать их, чтобы вы могли их искоренить.

Сдержанность и уважение: два принципа, которые больно усваивать

Вся жизнь Виньелли была посвящена борьбе с декоративными элементами. После определенного момента он использовал в общей сложности пять шрифтов до конца своей карьеры. Он считал, что большинство проблем дизайна вызваны добавлением чего-то, что следовало удалить. Он был прав почти во всех из них.

Сдержанность — самый сложный для усвоения принцип, потому что видимая часть работы в дизайне — это то, что вы добавляете. Никто не аплодирует удаленному градиенту, удалённой иконке, третьему шрифту, который вы отказались загрузить. Аплодирует читатель, молча, дочитывая страницу до конца.

Полезное личное правило. Прежде чем выпустить экран, удалите три элемента и посмотрите, работает ли дизайн. Если да, оставьте удалённые элементы.

Сдержанность служит принципу уважения к читателю. В печатном издании к читателю относятся как к взрослому. Penguin предполагал, что вы можете прочитать четырёхсотстраничный роман, набранный шрифтом Garamond размером 11 пунктов, без индикаторов прокрутки, без полосы прогресса, без оценки времени чтения.

Цифровые технологии пятнадцать лет тихо оскорбляли своих читателей. Чипы времени чтения, полосы прогресса, разделы «TLDR» внутри статей, которые сами по себе являются краткими изложениями. Предполагается, что читатель не может справиться с текстом без сопровождающего.

Отбросьте это предположение. Ваш читатель — взрослый. Он вознаградит вас, прочитав.

Как читать отличный разворот

Возьмите старый номер журнала New York Times Magazine, или журнал Bloomberg Businessweek времен Терли, или любой годовой отчет Pentagram. Откройте разворот. Теперь посмотрите внимательно.

Обратите внимание на вводную часть. Она всего одна. Это либо заголовок, либо изображение, либо цитата.

Обратите внимание на ее расположение: почти всегда на пересечении сетки, никогда не центрируется ради центрирования. Обратите внимание на вспомогательный текст: он мельче, часто светлее, никогда не «конкурирует» с вводной частью.

Обратите внимание на пустое пространство: его больше, чем вы ожидаете, оно имеет определенную форму, а не случайно. Обратите внимание на подписи: крошечные, привязанные к фиксированной колонке. Обратите внимание на страницы: они находятся в известном месте и не двигаются.

Это работа сетки. Это работа иерархии. Это работа ритма.

Каждое из этих решений было принято целенаправленно, человеком, на благо читателя.

Воксельная диаграмма разворота журнала, разделенного на две части, со стрелками и небольшими кубиками-аннотациями, указывающими на вводную часть, иерархию, сетку, промежутки между строками, пустое пространство и выноски, выполненная в мягких пастельных коралловых и кремовых тонах на темном фоне.
Воксельная диаграмма разворота журнала, разделенного на две части, со стрелками и небольшими кубиками-аннотациями, указывающими на вводную часть, иерархию, сетку, промежутки между строками, пустое пространство и выноски, выполненная в мягких пастельных коралловых и кремовых тонах на темном фоне.

Уроки типографики, которые легко усваиваются

Печатная типографика на десятилетия опережает экранную типографику по трем конкретным параметрам.

Во-первых, масштаб. Дизайнеры печатной продукции выбирают типографический масштаб и придерживаются его. Большая треть, идеальная четверть, золотое сечение — что угодно.

Дизайнер экранной продукции выбирает: «Ну, в системе дизайна есть восемь размеров, и я буду использовать большинство из них». Это не масштаб. Это шведский стол.

Во-вторых, длина строки и межстрочный интервал. В печатной типографии установлено около шестидесяти шести символов в строке для основного текста, с межстрочным интервалом примерно в сто сорок процентов от размера шрифта. Веб-дизайнеры регулярно выпускают абзацы шириной в сто двадцать символов с очень малым межстрочным интервалом, потому что так предписано в системе дизайна.

В-третьих, сочетание шрифтов. Правило печати — максимум два семейства шрифтов, и они должны выполнять разные задачи. Для заголовков и текста, или для шрифтов с засечками и без засечек.

В цифровом формате правило почему-то превратилось в «используйте Inter, а затем добавьте еще четыре шрифта, потому что они нравятся команде маркетинга». Ограничьте количество шрифтов двумя, и ваша иерархия станет чётче в одночасье.

Уроки дизайна с использованием пустого пространства и обложки

Пустое пространство — это не негатив дизайна. Это и есть дизайн. Швейцарская школа учила этому в пятидесятых годах, и с тех пор мы каким-то образом дважды это утратили.

Посмотрите на плакат Мюллера-Брокманна. Пустое пространство выполняет структурную работу. Оно обрамляет шрифт, направляет взгляд, даёт броским элементам место для размещения.

Пустое пространство — это не отсутствие контента. Это часть страницы, которая делает контент читаемым. Цифровые продукты боятся пустого пространства, потому что пустые пиксели кажутся пустой тратой места. Это не так.

Это пространство для дыхания, которое позволяет читателю остаться. Целевая страница с вдвое большим количеством пустого пространства конвертируется лучше, чем та же страница с вдвое большим количеством текста. Проверьте это на своём продукте. Обратите внимание, что происходит.

У обложки журнала есть две секунды, чтобы выполнить свою задачу на газетном киоске. Она должна сигнализировать о бренде, продавать главную статью и выглядеть красиво в миниатюрном размере. Дизайнеры-оформители решают эту проблему уже сто лет.

Главный элемент вашей главной страницы, экран адаптации, иконка приложения, изображение для публикации в социальных сетях — всё это обложки. Правило двух секунд.

Заимствуйте тактику. Одна доминирующая идея, один типографический якорь, одно изображение, которое не моргает. Если вашему главному элементу требуется три строки текста, чтобы объяснить себя, это не главный элемент.

Что не переносится из печати в цифровую среду

Печать не решила всех проблем. Будьте честны в отношении того, чего канон не может вам дать.

Печать не решила проблему интерактивности. Страница не реагирует на касание. Канон ничему не учит о состоянии, обратной связи, обработке ошибок или моменте, когда пользователь делает что-то, чего вы не предвидели.

Печать не решила проблему движения. Дизайнеры-оформители мыслят неподвижно. Движение — это ремесло, которому учатся в анимации, кино и играх, а не на разворотах журналов.

Печать не решила проблему адаптивной верстки. Печатная сетка учит дисциплине, но адаптивная сетка — это проблема, которую вы решаете поверх неё.

Принцип сохраняется, реализация — нет. Возьмите принципы, отбросьте предположения. Вот как правильно заимствовать.

Сцена вокселей, изображающая рабочее место дизайнера: экран с цифровым эскизом рядом с печатным вариантом, используемым в качестве эталона, с пометками коралловой ручкой, выполненными в мягких пастельных коралловых и кремовых тонах на темном фоне.
Сцена вокселей, изображающая рабочее место дизайнера: экран с цифровым эскизом рядом с печатным вариантом, используемым в качестве эталона, с пометками коралловой ручкой, выполненными в мягких пастельных коралловых и кремовых тонах на темном фоне.

Создание системы дизайна, вдохновленной печатной продукцией

Вы можете включить все это в систему дизайна, и никто не назовет вас изнеженным. Хитрость в том, чтобы закодировать принципы как ограничения, а не как украшения.

Ограничьте количество шрифтов двумя. Ограничьте размер шрифта шестью в реальном масштабе. Ограничьте количество цветовых токенов рабочим набором с одним акцентом, который заслуживает своей яркости.

Ограничьте количество токенов интервала ритмом, который сохраняется на разных контрольных точках. Ограничьте количество токенов теней и границ самым маленьким набором, который выполняет свою задачу.

Затем напишите правила использования. Межстрочный интервал в любом представлении — это самый большой элемент. Сетка священна, а выравнивание не подлежит обсуждению. Белое пространство — это токен, а не остаток.

Декор добавляется только тогда, когда он выполняет структурную функцию. Эти правила находятся в документации дизайн-системы, рядом с компонентами, и они рассматриваются в ходе критики дизайна так же, как и код в запросах на слияние.

Дизайн-система без принципов — это набор наклеек. Дизайн-система с заложенными в неё принципами печати — это публикация.

Баухаус понял это в 1920-х годах. Чихольд кодифицировал это в «Новой типографии» в 1928 году. Швейцарская школа внедрила это в практику в 1950-х годах.

Pentagram выпускает её на коммерческом рынке уже шестьдесят лет. Принципы стабильны, меняется лишь носитель.

Короткий семинар, который вы можете провести на своём собственном продукте

Выберите один экран из вашего текущего продукта. Главный экран главной страницы, панель управления, страница настроек — что угодно. Сядьте рядом с печатным объектом, который вы уважаете: разворот журнала, страница годового отчёта, начало книги в мягкой обложке — что угодно от Pentagram, Виньелли или Шера. Поставьте их рядом.

Задайте пять вопросов. Что является отправной точкой для каждого из них? Куда сначала, потом, затем взгляд устремляется? Сколько шрифтов и размеров используется, и сколько пустого пространства сформировано, а сколько — случайно?

Затем внесите изменения. Удалите три элемента, уменьшите «бровь», ограничьте шрифт двумя. Переместите межстрочный интервал к реальному пересечению сетки. Добавьте пустое пространство, пока страница не станет «дышать».

Проверьте новую версию, ответив на те же пять вопросов. Улучшение будет очевидным.

Делайте это раз в неделю в течение месяца. Ваш взгляд перенастроится. Ваши экраны станут тише и ярче. Ваша команда начнет это замечать.

Вот что дает образование в области печатной продукции, и вы можете получить его за один день.

Канон — это действующая библиотека, относитесь к ней соответственно

Имена в этой статье — это не история. Виньелли, Чихольд, Крувел, Шер, Мюллер-Брокманн, Карсон, Терли, Пентаграмма, Пингвин, Bloomberg Businessweek, New York Times Magazine. Это действующая библиотека, из которой вы можете черпать информацию уже на этой неделе.

Их книги всё ещё издаются. Их статьи всё ещё доступны онлайн. Их принципы всё ещё актуальны.

Купите одну монографию. Подпишитесь на один печатный журнал. Держите один ежегодник по дизайну на рабочем столе. Открывайте их, когда застрянете.

Канон всегда превзойдёт вашу доску на Pinterest. В этой области уже решено большинство ваших проблем. Работа ждёт, когда вы её посмотрите. Посмотрите.

If your product screens feel noisy and flat, hire Brainy to rebuild them with editorial discipline.

Get Started

More from Brainy Papers

Keep reading