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

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

Эталонный модуль — это заголовок, который накрывает текст:

Эта конструкция — самая узнаваемая и привычная для читателя.

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

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

Ссылки для продолжения чтения логично встают в конец блока:

Заголовок и главная ссылка могут быть объединены, если это не нарушит единообразие остальных блоков на странице:

Если в блоке нет текста, но есть несколько ссылок, у него есть шанс вытянуться в строку:

Или вовсе редуцироваться до отдельно стоящей ссылки:

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

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

Направим мутации эталона в сторону усложнения:

По колонкам становятся и неоднородные элементы:

Даже заголовок может свеситься в одной из колонок:

В такой конфигурации текст ничем не отделён сверху от соседних блоков и рискует «слипнуться» с их текстом. Но на простой странице это смотрится эффектно и «по‑швейцарски»:

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

Правило работает и в малых формах:

И в крупных блоках: