Вертикальный ритм в веб-дизайне

Небольшая заметка по основам типографики, выборе модуля и небольшие хитрости.

1. Выбор модуля

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

Самый универсальный и практичный на мой взгляд размер — 6px. Значение хорошо делится, умножается и кратно большинству популярным сеткам.

2. Про мерило и почему стоит его использовать

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

В своих работах я использую X2 или X4 значения, например: 12px; 24px; 48px.

Когда начинаешь понимать базовые принципы, тянет экспериментировать:
(например, если требуется больше «воздуха»)

«Живой пример» использования набора из-3 базовых отступов:

3. Создание вертикального ритма

Идеальный вариант, когда высота базовой линии строк основана на размере одного из модулей или кратных ему значений. Допускается использование кратных вертикальных сеток(например 12) к менее кратному вертикальному ритму(например 9 или 10 пикселей).

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

4. Работа с типографикой

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

Варианты «Scale factor» от сервиса Grid Lover.
https://www.gridlover.net/try

Про ширину строки уже много всего написано, почитайте тут:
https://img.artlebedev.ru/izdal/modulnye-sistemy/modulnie-sistemy.pdf

или здесь:

http://artgorbunov.ru/bb/soviet/20120415/

Общие особенности верстки:

  1. выравнивайте строку по базовой линии шрифта, но так же учитывайте и верх строки. Даже если он не попадает в сетку это нормально;
  2. идеальный вариант — это когда высота строки совпадает с высотой выбранного вертикального ритма;
  3. не забывайте про оптическую компенсацию и «висячую» пунктуацию.

Примеры шрифтовых прототипов с использованием вертикального ритма

Есть и другие варианты:

  1. когда вертикальную сетку подгоняют под «Scale factor» шрифта;
  2. когда line-height(высоту строки) подгоняют под выбранный вертикальный ритм.

А теперь немного боли, посмотрим как себя ведет шрифт в браузере:

  • Оранжевый — это то, как видит базовую высоту строки браузер (так называемая единица «M»)
  • Синий — это высота строки, которую мы задали в css

Грубо говоря мы получаем «танцы с бубном» и в этом случае задача верстальщика сводится к:

  1. прописать нужную высоту строки;
  2. с помощью верхнего и нижнего отступа разместить строку в нужную позицию, относительно вертикального ритма.

5. Особенности верстки вертикального ритма

Теперь немного про HTML, CSS и мои эксперименты. В поисках правды и проблемы постоянно «криво» сверстанной типографики, я решил прощупать все сам и начал переносить один из макетов в браузер.

Поставил на фон png с вертикальной сеткой

Добавляю контент

Далее подключаю шрифт, пишу стили и получаю адекватные блоки с заголовками и параграфами

Колонки и списки в наборе

или так

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

Теперь более поподробнее о верстке и переносе стилей и проблемах которые возникают в процессе.

Мы имеем несколько параметров на которые можем влиять:

  1. Размер шрифта — font-size
  2. Высота строки — line-height
  3. Внешний отступ — margin
  4. Внутренний отступ — padding

Одной из особенностей внешних отступов является «схлопывания» с соседними боками. Т. е. при размещении друг за другом двух блоков, с внешним отступом в 24px мы получаем не сумму, а их слияние, что крайне не удобно при формировании одинакового ритма.

Выглядит это так:

Если высота символов больше или меньше высоты строки вертикального ритма, то использование внешних отступов становится не возможным за счет объединения отступов разных размеров типографика начинает расползаться по вертикали.

Вывод:

  1. отказываемся от margin, переходим только на padding’и;
  2. правим верхний и нижний отступ, тем самым выравниваем строку по вертикальному ритму;
  3. тестируем набор с разными типами заголовков и параграфов;
  4. проверям в разных браузерах;
  5. готово!

Простой пример описания стилей, заголовок + параграф:

.text-container-one p{
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  font-size: 18px;
  line-height: 24px;
  padding-bottom: 19px;
  padding-top: 5px;
}
.text-container-one h1, .text-container-one h2, .text-container-one h3 {
  font-family: 'Oswald', sans-serif;
  font-weight: 400;
}
.text-container-one h1{
  font-size: 48px;
  line-height: 48px;
  padding-bottom: 33px;
  padding-top: 3px;
}

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

О  единицах измерений и переводе пикселей в em, прочитайте тут:
http://pixelgene.ru/articles/vertical-rhythm.html

Материалы по теме:

Лучший(по моему мнению) плагин для построения сеток для Photoshop GuideGuide
http://guideguide.me/

Онлайн-сервис для построения сетки
http://modulargrid.org/#app

Для создания шрифтового прототипа
https://www.gridlover.net/try

Онлайн-курс по типографике для веб-дизайнеров от TypeType School
http://typetypeschool.ru/webtypography/

Оптическая компенсация
https://habrahabr.ru/post/258571/

Модульные сетки. Оптика. Пунктуация
https://vk.com/page-79501976_49867227

Еще одна мега-полезная статья про верстку вертикального ритма
https://peredelka.wordpress.com/2013/10/29/%D0%BE-%D0%B2%D0%B5%D1%80%D1%81%D1%82%D0%BA%D0%B5-%D0%B2%D0%B5%D1%80%D1%82%D0%B8%D0%BA%D0%B0%D0%BB%D1%8C%D0%BD%D0%BE%D0%B3%D0%BE-%D1%80%D0%B8%D1%82%D0%BC%D0%B0/

Поделиться
Отправить
Запинить
Популярное