fbpx
vertical-rhythm

Как работать с вертикальным ритмом в типографике

Узнайте, как создавать и использовать вертикальный ритм в UI дизайне.

Вступление

Я начинаю новую серию советов для дизайнеров. Она охватит передовые темы веб-дизайна, такие как типографика, цвета, макет, компоненты и дизайн-системы.

Первая часть полностью посвящена типографике интерфейса. Здесь вы найдете полезную информацию для создания надежной типографики в своих проектах.

Профессия «UX-дизайнер»
7 дней дизайн-перезагрузки
Мощнейние спикеры, самое дружелюбное дизайн-комьнити и желание делать клевый дизайн.
Скидка 10% по промокоду UXPUB
Присоединиться

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

В этой статье мы обсудим отступы. Отступ помогает установить вертикальный ритм и определить отношения всех элементов типографики.

Хороший вертикальный ритм подобен хорошей песне. Он создан при помощи вдумчивых пауз и смены ритма, чтобы увлечь пользователя.

Совет 1 – используйте больший отступ для больших заголовков

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

Как работать с вертикальным ритмом в типографике

Совет 2 – используйте небольшой отступ для небольших заголовков

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

Как работать с вертикальным ритмом в типографике

Совет 3 – добавьте больше пространства над заголовками

Дополнительный отступ над заголовком создаст паузу для отделения одного фрагмента текста от другого. Кроме того, дополнительное пространство cделает смену темы более понятной.

Как работать с вертикальным ритмом в типографике

Совет 4 – отступ между абзацами

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

Используйте высоту строки основного шрифта, чтобы определить его. Например, если высота строки шрифта составляет 24pt, возьмите 40% -75% от этого числа и используйте его в качестве интервала. (например, 8/10/12 pt).

Этот метод зарекомендовал себя, потому что:

  1. Интервал всегда будет соответствовать выбранному шрифту.
  2. Вы можете умножить это число и создать систему интервалов.
Как работать с вертикальным ритмом в типографике

Совет 5 – сократите горизонтальное пространство для длинных заголовков

Наши глаза сканируют текст по Z-образному паттерну. Вот почему так сложно следить за длинными заголовками до последнего слова.

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

Как работать с вертикальным ритмом в типографике

Совет 6 – промежуток между текстом и изображением

Поместите изображение выше над заголовком. Это поможет не заслонять текст визуально тяжелыми изображениями или графикой.

Как работать с вертикальным ритмом в типографике

Совет 7 – отступ внутри абзаца

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

Как работать с вертикальным ритмом в типографике

Совет 8 – вертикальный ритм vs. сетка

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

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

Как работать с вертикальным ритмом в типографике

Полезные ресурсы

  • Inter— семейство шрифтов.
  • Modular Scale— быстро масштабируйте выбранный шрифт.
  • Kern Type— игра, в которой вы можете проверить кернинг на глаз и посмотреть уровень точности.
  • Typography Handbook— практическое руководство по веб-типографике.
  • Google Fonts.

Спасибо за прочтение 🙌

0 Комментариев
Межтекстовые Отзывы
Посмотреть все комментарии
Похожие статьи

Лучшие статьи, раз в неделю, с доставкой на почту

Total
2
Share