Skip to content

Улучшаем планировку с вертикальным ритмом

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

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

Что такое вертикальный ритм?

Ритм — это …

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

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

Создание хорошего вертикального ритма в веб-дизайне может быть сложным. Цель заключается в создании гармоничных отношений между всем содержанием (в том числе изображения и текст) на сайте.

Например, какое расстояние между абзацами на ваш взгляд лучше: слишком большое или слишком маленькое? Как вам самим легче будет читать? Есть много вопросов, и большинство из них будут сводиться к вопросу: «как читать будет легче?». Здесь даже малейшие изменения для улучшения чтения контента вашего сайта сделают огромную разницу для пользователей.

Как задать хороший вертикальный ритм?

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

Хороший вертикальный ритм
Хороший вертикальный ритм
Плохой вертикальный ритм
Плохой вертикальный ритм

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

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

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

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

Сайт Трента Уолтана - это изумительный пример хорошего вертикального ритма
Сайт Трента Уолтана — это изумительный пример хорошего вертикального ритма

Самый простой способ, который можно применить, так это задать основной font-size в 100% (что равняется 16px в большинстве браузеров). Если line-height будет равна 1, то высота линии также будет 16px. Тем не менее высоту линии, как правило, лучше поставить между 1.4-1.6. Но визуально только кажется, что это работает в большинство шрифтов. Как правило лучше просто поиграть с этим свойством. Если мы установим line-height в 1.5, наша высота строки будет 24px — и это наша базовая линия. Теперь нам необходимо убедиться, что все содержание и типографические элементы в нашем дизайне соответствуют или дополняют эту цифру в 24px.

Еще одна важная вещь для измерения — внешние отступы (margins). Действительно простой способ сохранить наш ритм — использование этого волшебного числа (24px) для наших отступов. Так как 24px — «магическое число», мы можем добавить отступ снизу для всех наших блоков в 24px (или 1.5rem, если вы так предпочитаете). Это поможет нам сохранить наш вертикальный ритм.

Изображения в нашем дизайне

Один маленький совет, который я нашел при работе с изображениями в дизайне. Убедитесь, что высота изображения кратна нашему магическому числу. Так в нашем примере изображение может иметь высоту 240px (10 х 24).

Импровизируйте!

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

Инструменты для создания вертикального ритма

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

Typecast

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

typecast

Modular Scale

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

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

modular-scale

Задания

Сегодня я хочу, чтобы вы просто поиграли с базовыми линиям — будь это проба в Typecast или же просто путем создания контура сетки базовых линий в Photoshop или других графических приложений, это полностью зависит от вас. После того, как у вас появится готовая сетка базовых линий, начните применять в ее рамкаъ принципы из этой статьи, начните выяснить масштабы и размеры шрифта, которые вы хотите использовать. После этого вы сможете начать интеграцию хорошего вертикального ритма в ваш дизайн — и ваши пользователи будут вам благодарны!

Источник: WebDesign Tuts+

Данная запись является частью серии "Школа дизайна для разработчиков".

Основы типографики для разработчика

Все о модульных сетках