Невидимые линии
Выравнивание — самое тихое средство из восьми и единственное, нарушение которого человек замечает не понимая, что именно он заметил. Макет «выглядит неаккуратно», а назвать причину не получается.
| Что происходит | Что видит человек |
|---|---|
| края стоят по одной линии | порядок, даже если блоки разные |
| края разъехались на пару точек | «что-то не так», причина не называется |
| у каждого блока свой край | макет рассыпается на части |
Механика простая: глаз достраивает линию сам. Три блока, у которых левый край на одном месте, читаются как один столбец, даже если между ними пусто. Четвёртый, сдвинутый на три точки, разрушает столбец целиком — и разрушает его тише, чем нарушение любого другого правила: ничего не «кричит», просто становится хуже.
Отсюда правило, которое звучит грубее, чем оно есть: у макета должно быть мало линий. Не «красиво расставленные блоки», а несколько краёв, вдоль которых стоит всё. Два-три вертикальных края на страницу — уже много; макет, где их шесть, выглядит случайным независимо от того, сколько времени на него потратили.
И вывод, который экономит больше всего времени новичку: выравнивание — не то, что делают в конце. Его не «наводят», подвигав блоки на глаз; линии выбираются до того, как что-то поставлено, и дальше всё встаёт на них. Про то, откуда эти линии берутся, — отдельный урок про сетку.
Четыре выключки
Второе — выключка: как набран сам текст внутри блока. Вариантов четыре, и выбор между ними не про вкус.
| Выключка | Для чего | Чем платим |
|---|---|---|
| по левому краю | основной текст, списки, почти всё | правый край неровный — это норма |
| по правому краю | числа, даты, подписи у правого края | текст читается тяжелее |
| по центру | короткие заголовки, подписи, открытки | нет края для возврата глаза |
| по формату | узкая колонка в вёрстке | дыры между словами без переносов |
Главная рабочая выключка — по левому краю, и её неровный правый край это не недостаток, а признак: расстояния между словами везде одинаковые, и текст читается ровно. Попытка «выровнять и справа тоже» без переносов даёт обратное — дыры между словами, которые складываются в вертикальные светлые реки поперёк абзаца.
Выключка по центру — та, которую выбирают чаще всего и почти всегда зря. Причина в том, что она выглядит «торжественно», а последствие в том, что у каждой строки свой левый край: дочитав строку, глаз должен найти начало следующей, а искать приходится каждый раз в новом месте. На трёх строках это незаметно, на десяти — читается вдвое медленнее.
Частые поломки
Третье — частые поломки выравнивания и то, как они выглядят.
| Поломка | Как выглядит |
|---|---|
| смешанная выключка | заголовок по центру, текст слева |
| мнимое выравнивание | края совпадают «почти» |
| выравнивание по пустому месту | блок выровнен по краю картинки, а не текста |
| лишняя линия | подпись начинается со своего края |
Первая — самая заметная и самая любимая: заголовок по центру над текстом по левому краю. Так делают «чтобы заголовок выделялся», а выходит, что у блока два разных края и он перестаёт читаться как целое. Заголовок выделяют размером и весом, а край у него остаётся общий с текстом.
Вторая — мнимое выравнивание: края совпадают почти. Три точки разницы человек не назовёт, но увидит; хуже того, он увидит их как неряшливость автора, а не как случайность. Лечится это не глазом, а числом: края задаются одним и тем же значением, а не подгоняются.
Третья — тонкая и встречается у всех: выравнивание по краю картинки, а не по краю того, что на ней нарисовано. У картинки бывает прозрачное поле, у кнопки — внутренний отступ, у значка — пустота вокруг. Формально края совпадают, а глаз видит сдвиг, потому что смотрит он на изображение, а не на его рамку.