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

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

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

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

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

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

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

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

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

Кернинг

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Ясность смысла и легкость чтения всегда превосходят формальные ограничения работы с сетками. —Джон Кейн

Смотрите также

1. Why is Vertical Rhythm an Important Typography Practice?
   Статья
2. Kern Type, the kerning game
   Игра
3. Proper hanging punctuation in CSS by Kenneth Ormandy
   Инструмент
4. Gutenberg—A Meaningful Web Typography Starter Kit
   Инструмент
5. Grid Lover
   Инструмент

Уроки

1. Введение в типографику
2. Равносторонний треугольник идеального абзаца
3. Анатомия гарнитуры
4. Выбор гарнитур
5. Сочетание гарнитур
6. Ритм в веб-типографике

По материалам https://betterwebtype.com/