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

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

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

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

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

Большинство браузеров применяют кернинг по умолчанию. Это значит, что кернинг будет включен для большего набора и отключен для меньшего. Плохой кернинг не так очевиден при малом наборе. Если хотите, вы можете контролировать его таким образом:
font-kerning: normal; // enables kerning
font-kerning: none; // disables kerning
Это то, что мы можем сделать со стандартными настройками браузера прямо сейчас. Возможно, это недостаточно хороший способ для некоторых ситуаций, когда нам нужно сместить конкретную букву на какое-то количество пикселей, чтобы достичь визуального совершенства. Хорошо, что есть инструменты как Lettering.js. С их помощью, мы можем контролировать позицию и стиль каждой буквы.
Выравнивание
Перерыв в музыке имеет значение. Он отделяет звук от тишины. Небытие из богатого звука аккорда. Кажется, что это нарушает ритм (хотя перерывы в музыке всегда соответствуют ритму). Мы получаем такой же эффект в типографике. Комбинации букв, слов и пустого пространства определяют ритм. Для плавного чтения, этот ритм должен быть последовательным. И, т.к. Мы читаем от слова к слову, слишком большое расстояние между словами нарушает ритм. Это прерывает плавный процесс чтения. Это превращает простой текст в сложный для восприятия. Не имеет значения, какой язык слов мы используем. Я до сих пор часто сталкиваюсь в Интернете с таким:


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

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

Сейчас у нас есть только параграф текста, поэтому всё выглядит хорошо. Чтобы сохранить этот ритм, нам нужно использовать высоту линии в качестве основного параметра для любого размера, края и отступа на сайте. Давайте посмотрим. Мы хотим добавить заголовок к нашему тексту. Сделаем его размером в 55 пикселей, чтобы он выделялся. Его высота линии теперь должна быть даже кратной высоте линии. Это также относится к его краям – особенно верхнему и нижнему.
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
}
Поэтому, если вы хотите, чтобы ваши списки имели конкретное нижнее поле, вы должны сделать примерно так:
margin-bottom: 60px; // = 2 * 30px
}
Что происходит, когда вертикальный ритм нарушает изображение? Изображения бывают разных размеров. Невозможно ожидать, что мы сможем контролировать их высоту в каждом случае. Особенно для крупномасштабных сайтов. Что делать в таких случаях? Моя рекомендация: оставьте всё как есть. Используйте базовую сетку в качестве ориентира, а не ограничения. Ваш текст и страница по-прежнему имеют вертикальный ритм. У них по-прежнему установленная визуальная иерархия. Большие сплошные блоки контента, которыми определенно являются изображения, не разрушают визуальный порядок.
Ясность смысла и легкость чтения всегда превосходят формальные ограничения работы с сетками. —Джон Кейн
Смотрите также
- Why is Vertical Rhythm an Important Typography Practice?
Статья - Kern Type, the kerning game
Игра - Proper hanging punctuation in CSS by Kenneth Ormandy
Инструмент - Gutenberg—A Meaningful Web Typography Starter Kit
Инструмент - Grid Lover
Инструмент
Уроки
- Введение в типографику
- Равносторонний треугольник идеального абзаца
- Анатомия гарнитуры
- Выбор гарнитур
- Сочетание гарнитур
- Ритм в веб-типографике
По материалам https://betterwebtype.com/