Чтобы хорошо сверстать, в самом начале лучше забыть о направляющих. Прямо взять и убрать:

Заодно подтянем вертикальные расстояния между абзацами, чтобы они не побеждали расстояния между колонками

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

Заодно уделим внимание осмысленности в переносах слов

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

Если меню состоит только из отдельных слов, их естественнее объединить «строку Воронежского» с равными пробелами:

Я советую использовать гайды как чертёжную линейку, чтобы точно построить, что уже придумано. Исходник макета с миллионом вертикальных и горизонтальных направляющих — верный признак любителя.

Типографика в вебеМодульная сеткаСтрока ВоронежскогоМодульная вёрсткаПравило внутреннего и внешнегоФормат: текстНоситель: сайт
Отправить
Поделиться
Запинить

Комментарии

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

13 мая 2013

Фишка в том, что надо не делать равное расстояние между линиями выключки столбиков, а в том, чтобы создать иллюзию равного расстояния. Знание типографики открывает клёвые вещи — например что меню тоже можно кернить.

Есть два способа:

  1. Сделать пустое пространство между столбиками визуально одинаковым. На глазок. Это имеет смысл в жёстком дизайне — в постерах, на афишах, на картинках.

  2. Сделать расстояние между столбиками численно одинаковым. Имеет смысл в веб‑дизайне (так не уломаешься объяснять верстальщику, что тебе от него надо). Только здесь надо заранее свести столбики к прямоугольнику (чтобы не было слишком длинных строк рядом со слишком короткими).

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

13 мая 2013

Виды горизонтальных панелей навигации: http://habrahabr.ru/post/180473/

31 мая 2013

Рекомендуем другие советы