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

[nobelfaik]

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

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





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



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

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



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



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



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



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

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

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





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

См. также: Переверстка №27. Листовка маникюрного салона

Серия «Неудачные приемы верстки»
Горки текста
Ноги текста
Колонки разной ширины
Бутерброды текста
Картинка без модуля
Слишком ровный правый край