Вертикальный ритм

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

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

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

Колонки текста

В школе я застал те времена, когда компьютеры еще были вещью больше элитарной, нежели массовой. И рефераты тогда писались в библиотеке на листах а4 формата. Под листы скрепкой прикреплялась зебра — разлинеенный вертикально лист бумаги с ровным шагом. Рукописный текст выглядел гораздо лучше, если он писался под зебру, нежели без нее. Тогда я не догадывался, какой из этого толк и как мне это поможет в будущем. Та самая зебра и есть блюститель вертикального ритма. Текст читается лучше, когда глаз «ходит» через равный интервал.

Особенно несоблюдение вертикального ритма видно на соседних колонках. В примере показаны две рядом стоящие колонки текста: первая набрана Эриалом 12px, вторая — Эриал 11px. Задаем «зебру» в 18 пикселей (то есть полуторный интерлиньяж для основного начертания).



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

Решение: установка в body css-параметра line-height глобально для всего документа. Также задаем margin-bottom, равный этой же величине.

Заголовки

Заголовки отличаются от основного текста как минимум кеглем. И размер шрифта заголовка иногда отличается в 2—4 раза от кегля основного начертания. Естественно то, что и высота строки увеличится. Чтобы соблюдать ритм, нужно задавать высоту строки заголовков кратной глобальной высоте.



Помимо параметра line-height придется стрелять и за вертикальными полями — margin-top и margin-bottom. Посмотрим на примере заголовка первого уровня.



Есть подводный камень — всю иерархию заголовков с высотой строки L или 2L выстроить не получиться: текст станет неоднородным по плотности. Например, вот заголовок, скажем, второго уровня:



Поэтому допускается использовать для текста с кеглем, немногим больше основного кегля, глобальную высоту строки помноженную на полтора. И еще один из методов сбалансировать ритм по вертикали в таких случаях — «перекинуть» часть верхнего поля нижнему, или наоборот. Главное то, что в сумме они должны оставаться равны одному и тому же числу, что и до «перебрасывания».



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

Списки

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



То же касается и вертикальных полей вложенных списков. Обратите внимание: во вложенном списке вертикальные поля уменьшены вдвое.

Картинки

Картинки занимают иногда немалое пространство. Высота картинок может колебаться от мелких «ушек», до огромных по высоте хай-рез джипегов. И это самое сложное для дизайнеров-педантов: за высотой картинки не уследишь без ручного вмешательства. Но если абстрагироваться от слепых следований каким-то канонам и воспринимать их с умом, то станет понятно, что если картинка, скажем, больше 50 пикселей по высоте, то редкий педант заметит то, что ритм сбит. Никто не тыкает линейкой по своему экрану. А глаз заметит расхождение только у Робокопа: у него перед глазами полосочки были вертикально замощены, чтобы он палил неритмично сверстанные страницы :)

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

PS

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

Чтобы увидеть результат вышесказанного, приведу в пример страницу английского дизайнера Стива Маршала. У нее есть режим включеной «зебры», где весь холст замощен полосками для демонстрации вертикального ритма.