Как подобрать универсальный рабочий шрифт для веба, печати, интерфейсов и айдентики

На что обратить внимание в рисунке, знаковом составе и начертаниях — рассказываем на примере шрифта PT Root.

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

Мы недавно выпустили PT Root — как раз такой универсальный шрифт, который подойдёт и для книги о копирайтинге, и для сайта магазина электроники. На примере Рута расскажем, как выбрать спокойный рабочий шрифт.

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

Чтобы понять наверняка, перед вами нейтральный шрифт или нет, можно сравнить его с Гельветикой, Ариалом, Робото или Сан Франциско. Если выбранный шрифт привлекает внимание не больше, чем эти шрифты, то он нейтральный.

При этом необязательно, чтобы шрифт был вовсе лишён характерных особенностей. Например, у Рута самая простая форма из спокойно-текстовых шрифтов. Там, где возможны варианты, например, У с хвостиком или без, Виталий выбирал самый лаконичный. Ещё у Рута узковатые пропорции и небольшая «оквадраченность» круглых знаков, за счёт которой буквы выглядят чуть крупнее. В результате Рут вышел немного брутальным, хотя в наборе, особенно в некрупном кегле, это почти незаметно.

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

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

Вот несколько параметров, на которые стоит обратить внимание, при выборе нейтрального рабочего шрифта:

• Узкие пропорции и короткие выносные элементы делают шрифт компактнее. Такие шрифты особенно хороши, когда есть ограничения по длине текста: на сайте, в мобильном приложении или навигации.
• Униширинные шрифты (например, бесплатный компаньон Рута PT Root UI) подходят для интерфейсов. В таких шрифтах ширина площадки знака не меняется от начертания к начертанию, что удобно при вёрстке. Скажем, дизайнер подготовил макет мобильного приложения, а заказчик попросил сделать пункты меню пожирнее. С униширинным шрифтом, даже если поменять начертание на более жирное, буквы останутся на тех же местах и строка не «поедет».
  

• Высокие строчные буквы. Для сложных условий чтения, особенно текстов в мелком кегле (например, инструкций на упаковке), лучше выбрать шрифт с высокими строчными буквами с короткими выносными элементами. Так знаки займут меньше места, но их всё равно будет легко разглядеть.
• Просторные межбуквенные расстояния. Для длинных текстов, мелких подписей и других сложных условий для чтения стоит брать шрифты с более свободными промежутками между буквами. Это известный оптический эффект: если шрифт мелкий — то промежутки кажутся меньше и буквы начинают слипаться.
  

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

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

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

• расширенная кириллица и латиница — это значит, что шрифт поддерживает большинство языков России, СНГ и Европы, что значительно упростит локализацию продукта;

• неалфавитные знаки — стрелки, табличные и пропорциональные цифры, геометрические фигуры, звёздочки, математические символы (в Root даже есть знак диаметра) и так далее.

Знаковый состав можно посмотреть на странице шрифта на сайте: в аннотации или отдельном разделе (например, на страничке конкретного начертания).

Начертание — один стиль внутри шрифта. Это комплект знаков шрифта одного определённого рисунка, наклона, пропорций, контраста и насыщенности. Например, курсив — это начертание.

Чем больше начертаний в шрифте, тем больше возможностей для его использования. Так, один шрифт можно использовать для текстов разной иерархии: заголовков, подписей, выделений внутри текста или колонтитулов. А ещё на разных площадках — скажем, регулярное начертание для сайта, а зауженное в интерфейсе мобильного приложения. В общем, чем у шрифта больше начертаний, тем он функциональнее, но и тем легче в них запутаться.

В Руте десять начертаний с градацией по жирности от Hairline до Black — как раз такая градация в самых популярных шрифтах для веба. Начертания от Thin до Black удобно обозначать в CSS числами от 100 до 900. Давайте на примера Рута посмотрим, для чего какое начертание.

• Hairline — сверхтонкое начертание для акциденции и айдентики, хорошо смотрится в крупном кегле.

• Thin и Extra Light — тонкие начертания, тоже для заголовков и крупного кегля.

• Light — может заменить Regular в крупном кегле или при инверсии на экране (например, для тёмной темы в мобильном приложении).

• Regular — регулярное начертание для длинных текстов на экране и в печати.

• Medium и DemiBold — хороши для навигации и для выделений в тексте — когда хочется пожирнее регулярного, но Bold — уже слишком.

• Bold — жирное начертания для выделений в тексте, заголовков и подзаголовков.

• Extra Bold, Black — сверхжирные начертания для акциденции.

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

Собрали подборку проверенных универсальных шрифтов с развитой системой начертаний и широким знаковым составом. В списке есть как бесплатные, так и платные шрифты (такие, лицензию на которые можно оплатить российской картой) разных шрифтовых студий.

• Circe

• CoFo Sans

• Commissioner

• DIN 2014

• Fact

• Formular Neutral
• Graphik

• Golos Text + Golos UI

• IBM Plex Sans
  
• Inter
  
• Hint
  

• Montserrat

• PT Root + PT Root UI

• Stem
  
• Tilda Sans
  

• TT Commons

• TT Norms Pro

  
  

Подписывайтесь на наш Телеграм-канал о шрифтах и типографике — там много всего полезного и красивого.

Над статьёй работали Даша Савина, Виталий Кузьмин, Александра Королькова и Галина Кунарёва