TypographyLayoutIgor ShtangComposition

Бутерброды текста

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

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

Много маленьких бутербродиков:

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

Всплывающее окно на сайте «Уральских авиалиний». Встретились два заголовка, получилось 3 текстовых слоя + кнопки:

Шапка профиля на Пинтересте. Иконки + 4 текстовых слоя + табы. Еще эти точечки:

Анонс статьи на Медиуме. 5 текстовых слоев:

Шапка профиля в Твиттере. Количество слоев и приемов оформления зашкаливает:

Чтобы избавиться от бутерброда, нужно его сокращать и упрощать. Например:

  1. Убрать один из блоков совсем или переместить в другое место.
  2. Убрать лишнее оформление, свести к минимуму количество выделительных приемов.
  3. Объединить несколько блоков в один.

Конечно, бутерброды — это не всегда плохо. Однако подобрать правильное сочетание шрифтов, цветов, кеглей и отступов — непростая задача. Прекрасные бутерброды были в журнале «Афиша-Еда»:

Если так не получается, будьте проще)

IIgor Shtang