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

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

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

Горизонтальный ритм

Межбуквенный интервал

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

Существует 2 сценария, когда изменение интервалов между буквами даёт положительный результат. Заголовки больше и тяжелее основного текста. Из-за этого межбуквенный интервал визуально тоже выглядит больше, чем у основного текста. В этом случае можно слегка уменьшить межбуквенный интервал. Мы говорим о 3-5%, не больше. Это позволит сделать ваши заголовки немного более компактными, и чуточку ближе к виду основного текста.

Изменение межбуквенного интервала может быть полезным, когда текст набран капителью или заглавными буквами. использовать заглавные для длинного текста – плохая идея, поэтому мы имеем в виду заголовки. Всякий раз, когда у нас есть строка текста, набранная заглавными буквами или капителью, будет полезно немного увеличить расстояние между буквами. Я рекомендую изменить значение на 5-10%.

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

Кернинг

Расстояние между разными буквами далеко не одинаковое. У каждой буквы разное пространство вокруг, независимо от соседней буквы. Вот почему мы получаем такие несоответствия:

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

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

font-kerning: auto; // default
font-kerning: normal; // enables kerning
font-kerning: none; // disables kerning

Это то, что мы можем сделать со стандартными настройками браузера прямо сейчас. Возможно, это недостаточно хороший способ для некоторых ситуаций, когда нам нужно сместить конкретную букву на какое-то количество пикселей, чтобы достичь визуального совершенства. Хорошо, что есть инструменты как Lettering.js. С их помощью, мы можем контролировать позицию и стиль каждой буквы.

Выравнивание

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

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

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

Давайте предположим, на сайте размер основного текста 20 пикселей и интерлиньяж (высота строки) 30 пикселей. Ширина строки должна быть подходящей для этого размера и высота строки в 600 пикселей выглядеть корректно. Теперь у нас есть все, что нужно для настройки вертикального ритма на странице. Чтобы это сделать, нам понадобится базовая ритмическая единица. В типографике это интерлиньяж. Мы можем увидеть его, добавив на наш сайт сетку базовых линий высотой в 30 пикселей.

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

Сейчас у нас есть только параграф текста, поэтому всё выглядит хорошо. Чтобы сохранить этот ритм, нам нужно использовать высоту линии в качестве основного параметра для любого размера, края и отступа на сайте. Давайте посмотрим. Мы хотим добавить заголовок к нашему тексту. Сделаем его размером в 55 пикселей, чтобы он выделялся. Его высота линии теперь должна быть даже кратной высоте линии. Это также относится к его краям – особенно верхнему и нижнему.

h3 {
font-size: 55px;
line-height: 60px; // = 2 * 30px (body text line-height)
margin-top: 90px; // = 3 * 30px
margin-bottom: 30px; // = 1 * 30px
}

Запомните: я использую пиксели для этих примеров, но вы должны использовать такие значения как em, rem, или просто десятичное значение 1,5 или процентное (150%) значение для высоты строки.

Мы назначили высоту линии 60 пикселей, потому что это следующее кратное значение нашей базовой высоте линии (30 пикселей), с которым хорошо сочетается заголовок в 55 пикселей.

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

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

* {
line-height: 30px;
margin-top: 0;
margin-bottom: 30px; // = 1 * 30px
}

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

ul, ol {
margin-bottom: 60px; // = 2 * 30px
}

Что происходит, когда вертикальный ритм нарушает изображение? Изображения бывают разных размеров. Невозможно ожидать, что мы сможем контролировать их высоту в каждом случае. Особенно для крупномасштабных сайтов. Что делать в таких случаях? Моя рекомендация: оставьте всё как есть. Используйте базовую сетку в качестве ориентира, а не ограничения. Ваш текст и страница по-прежнему имеют вертикальный ритм. У них по-прежнему установленная визуальная иерархия. Большие сплошные блоки контента, которыми определенно являются изображения, не разрушают визуальный порядок.