Руководство дизайнера по межбуквенным интервалам

Работать с межбуквенным интервалом (трекингом) — значит добавлять и удалять расстояния между буквами. Не путайте трекинг с кернингом, это два разных понятия: в трекинге межбуквенный интервал влияет на весь текстовый блок, а кернинг регулирует расстояние между двумя отдельными символами. Кернингом лучше заниматься разработчикам шрифтов, тем более, что пока нет способа контролировать кернинг в CSS, а для трекинга — есть.

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

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

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

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

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

Давайте взглянем на шрифты «Roboto» и «San Francisco» (первый используется в Material Design, второй — в экосистеме Apple):

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

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

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

• H1 — 96px: -1.5%;
• H2 — 60px: -0.5%;
• H3 — 48px: 0%;
• H4 — 34px: 0.25%;
• H5 — 24px: 0%;
• H6 — 20px: 0.15%;
• Подзаголовки — 16px: 0.15% .

Любой шрифт, как правило, нужно отрегулировать. Например, если использовать шрифт Aktiv Grotesk Condensed в мелком размере, то буквы будут расположены слишком близко друг к другу, и текст будет плохо разборчив. Если кастомизировать расстояние между буквами на 1.5%, читать текст станет легче.

Даже несмотря на то, что в семье «San Francisco» есть шрифт «SF Pro Display» для заголовков и «SF Pro Text» для основного текста, чтобы сделать их более изящными все равно нужно настроить межбуквенный интервал.

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

Учитывайте высоту строки

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

Светлый текст на темном фоне

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

В отличие от заголовков и основного текста, шрифты меньшего размера не имеют большого количества вариантов межбуквенного интервала. Обычно размер шрифта подписей делают меньше 13 пикселей, чтобы увеличить расстояние между буквами (добавляя воздух между буквами) и сделать его более читаемым. Но всегда есть исключения — некоторые руководства предлагают использовать положительный межбуквенный интервал только тогда, когда размер шрифта составляет 11px или меньше. Обязательно поэкспериментируйте с настройками.

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

• Подпись — 12px — 0.5%;
• Overline — 10px — 1.5% .

Последний совет: анализируя работу других дизайнеров, вы заметите некоторые нюансы — это поможет в собственных будущих проектах.


Статья подготовлена на основе материала The designer's guide to letter-spacing.