Прямоугольнее

Один из способов улучшить вёрстку — запрямоугольнить всё, что можно.

Вот случайная фотка с моего телефона — какая-то питерская табличка:

Почему она такая уродская? Потому что в ней всё выровнено по центру.

Представьте, что вам в комнате нужно поставить стол. Можно поставить к стенке, а можно и посередине, если это столовая. Если у вас есть один главный объект, его можно смело ставить посередине, и никто не спросит «почему посередине»:

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

Поставить ещё что-то посередине — сложно. Но можно поставить посередине стен. С одной стороны — тумбочка с телевизором, чтобы удобно смотреть с дивана, с другой — книжный шкаф:

Но всё, пора остановиться. На питерской табличке по центру стоит всё, и это ад:

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

Вы можете сказать: но ведь книжные титулы часто оформляют с центровкой. Да, в классическом стиле титулы порой делали весьма многоэтажными. Вот фотка с курса Игоря Штанга по вёрстке — смотрите как интересно слева:

Или вот книжка из инстаграма «Носков поэта»:

Так можно, но это сложно. Если у вас нет опыта, не используйте выравнивание по центру.

Выравнивайте всё по левому краю:

Так форма текста уже начинает хоть чуть-чуть дружить с форматом.

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

Теперь у нас два прямоугольника.

Слова «туристическая фирма» сейчас кричат громче всех. Прибьём их к своему логотипу. Тогда можно будет чуток увеличить поля:

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

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

Это не шедевр вёрстки, просто с прямоугольниками проще сделать аккуратно.

А ещё можно так:

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

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