Введение

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

Обычная сетка, чаще 12 колоночная, помогает с организацией контента, можно гибко настроить правила и использовать вложенные сетки. Это все дает очень неплохой эффект

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

Разобравшись с этим всем, я понял как организовывать пространство по горизонтали.

Проблема

Я пользовался достаточно примитивной схемой для определения вертикального отступа.

Я брал за основу несколько стандартных размеров для отсутпов, кратных либо 8 либо 10.
10\20\30\40\60\80

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

Решение

В сети есть замечательный сервис по авто подбору величины шрифтов.http://type-scale.com/

Он помогает быстро создать требуемые размеры для проекта. Можно выбрать контрастные размеры, можно сделать что то поспокойнее.

Возмьем соотношение размеров в 1.414 ( augmented fourth )

Мы получим 5 разных размеров шрифтов.
Вертикальный ритм для этих размеров можно задать в 6–7–8 пикселей. Достаточно гибкие размеры которые позволяют создать достаточно широкий диапазон высоты строчек.

Самая магия происходит тогда, когда мы задаем им высоту строки кратную шагу стеки.

Все строчки лежат на своей линии. Тем самым можно обеспечить равномерное заполнение пространства.

Внесем чуть больше элементов, и сравним с тем как я бы это же делал раньше.

Слева моя попытка понять для себя законы вертикального ритма. Справа то как я рисовал то же самое раньше.
Понятно что я к примеру мог бы задать размер высоты строки для основного текста в 140%

Посмотрим чем это нам поможет:

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

Вывод

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

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

Послесловие

В качестве закрепления материала, переделаю один элемент из одного недавнего проекта согласно правилам вертикального ритма.

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

Из примера видно что карточка стала чуть лучше. В особенности основной текст стал заметно свободнее в чтении, так как добавился воздух между строчками.

Со стороны может показаться что эти изменения несущественны, но это только на первый взгляд. В дизайне важна каждая мелочь и штрих.

Так-же применяя системный метод можно добиться единообразия в макетах, и быть уверенным что стандарты по удобочитаемости шрифта будут выполнятся, даже невзирая на то что у тебя это сотый макет и глаз замылился. Еще гораздо проще соблюдать правила дизайн системы, так как можно задать отступы не в десятках пикселей, а в количестве строк, что гораздо проще к пониманию и соблюдению. Количество строк можно просмотреть визуально, и определить что элемент отбит сверху и снизу на одинаковое количество строк. Когда как размеры в пикселях нужно сверять через замеры расстояния в пикселях между элементами, что чуть дольше.