cover 1160x620 - Принципы использования межбуквенного интервала

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

Что такое леттер-спейсинг

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

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Принципы использования межбуквенного интервала

Зачем менять расстояние между буквами

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

Использование межбуквенного интервала не ограничивается  удобным чтением. Если вы хотите, чтобы часть вашего текста выделялась, вы можете использовать, например, эффект “разряженного текста”, который достигается путем увеличения расстояния между буквами. Хотя этот прием и редко применяется в наше время, он все еще заслуживает внимания.

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

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Принципы использования межбуквенного интервала

Влияние межбуквенного интервала на читабельность текста

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

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Принципы использования межбуквенного интервала

Заглавные буквы

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

Заголовки

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

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

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Принципы использования межбуквенного интервала
png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Принципы использования межбуквенного интервала

Давайте внимательнее посмотрим на шрифты Roboto и San Francisco (первый используется в Material Design, а второй – в экосистеме Apple). Заголовки, размером от 20 до 48 пикселей имеют либо положительное значение межбуквенного интервала, либо ноль. Если размер шрифта увеличивается, то значение показателя становится отрицательным. Конкретно эти цифры не подойдут ко всем другим видам шрифтов, но попробовав много разных подходов, могу точно сказать, что это своего рода универсальный шаблон действий.

Я попробовал на практике несколько гайдов по леттер-спейсингу и тот, что был опубликован агентством “Bazen”, на самом деле хорошо работает со многими популярными шрифтами. Для вас это может стать отличной отправной точкой, хотя, конечно, вы всегда можете что-то добавить или убавить:

  • H1 — 96px — -1.5%
  • H2 — 60px — -0.5%
  • H3 — 48px — 0%
  • H4 — 34px — 0.25%
  • H5 — 24px — 0%
  • H6 — 20px — 0.15%
  • Subtitle — 16px — 0.15%

Если вы сейчас занимаетесь дизайном приложений или планируете делать это в будущем, то вот вам мой совет:  что сэкономило мне много времени во время работы в “Messapps”, так это использование стандартных шрифтовых гайдов “Material Design” и “Apple”.

Основной текст

Если вы когда-нибудь что-нибудь читали о межбуквенном интервале, вы, вероятно, видели эту популярную фразу типографа Фредерика Гуди: «Любой, кто будет менять межбуквенный интервал у строчных букв, будет воровать овец» (ориг. “Anyone who would letter-space lowercase would steal sheep”). Однако есть мнение, что речь шла о готических шрифтах. Некоторые дизайнеры взяли его слова за правило и теперь никогда не корректируют строчные буквы. Основываясь на собственном опыте, и на опыте многих других шрифтовых дизайнеров, я не могу согласится с известными словами, потому что иногда незначительные изменения могут очень сильно повлиять на внешний вид всего текста. Давайте возьмем, к примеру, сжатые (Condensed) шрифты. При маленьком размере буквы расположены слишком близко друг к другу, так что текст становится очень сложным для восприятия. Увеличив расстояние между буквами всего лишь на 1,5%, вы увидите, что текст становится значительно легче для прочтения.

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Принципы использования межбуквенного интервала

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

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

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

Межстрочный интервал

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Принципы использования межбуквенного интервала

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

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

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Принципы использования межбуквенного интервала

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

Главные значения для основного текста

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

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Принципы использования межбуквенного интервала
  • Body 1 — 16px — 0.5%
  • Body 2 — 14px — 0.25%

Подписи

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

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

  • Caption — 12px — 0.5%
  • Overline — 10px — 1.5%

Финальный совет

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

Об Авторе

Денис работает главным дизайнером в Messapps, компании, которая занимается UI/UX дизайном и разработкой приложений и сайтов. До того как Денис стал заниматься веб-дизайном, он учился звукорежиссуре в Нью-Йорке, Лос-Анджелесе и Москве. Сейчас он занимается дизайном мобильных приложений и сайтов для одной из топовых компаний в Нью-Йорке. Помимо этого он любит экспериментировать с типографикой и 3D в свое свободное время.

Свежие вакансии
                        MYTONA MYTONA Game UI/UX Designer Удаленно Санкт-Петербург По договоренности ₽
                        ООО "Компания В.И.К." ООО "Компания В.И.К." Дизайнер (в офис) Офис Краснодар 35 000 ₽
                        ООО РЖД-Технологии ООО РЖД-Технологии Графический дизайнер Офис Москва
                        Ак Барс Цифровые Технологии Ак Барс Цифровые Технологии UI/UX дизайнер Офис Казань от 70 000 ₽
                        Kodix Kodix UX/UI Designer Офис Москва (Moscow, Russia)
Все вакансии

Если вы нашли ошибку, выделите фрагмент текста и нажмите Ctrl+Enter

Похожие записи

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

В этой статье я обобщил множество практических рекомендаций по дизайну мобильных приложений

Эффективная работа с типографикой в Figma

В этой статье мы рассмотрим, что вы должны учитывать, при работе со шрифтами в Figma

Почему дизайн интерфейсов сводится к типографике

Я начинаю любой семинар с того, что говорю следующее: Первое правило дизайна:…