Как подобрать универсальный рабочий шрифт для веба, печати, интерфейсов и айдентики
На что обратить внимание в рисунке, знаковом составе и начертаниях — рассказываем на примере шрифта PT Root.
Часто для проекта нужен нейтральный шрифт, чтобы он не привлекал внимания, а просто хорошо смотрелся и передавал информацию. А ещё чтобы работал в совершенно разных текстах: от блога на сайте до печатного каталога или логотипа мобильного приложения — мало кто захочет покупать отдельный шрифт для каждого нового применения.
Мы недавно выпустили PT Root — как раз такой универсальный шрифт, который подойдёт и для книги о копирайтинге, и для сайта магазина электроники. На примере Рута расскажем, как выбрать спокойный рабочий шрифт.
Рут в каталоге шрифтов
Характер и рисунок шрифта
Универсальный шрифт должен быть незаметным. Тогда вы сможете использовать его где угодно, а пользователи будут спокойно читать текст и не спотыкаться о необычный шрифт. Вот как Виталий Кузьмин, автор Рута, описывает, каким должен быть нейтральный шрифт:
Это должен быть шрифт в духе «поставил и забыл», незаметный глазу. Нормальные пропорции и контраст, ожидаемый рисунок знаков. Только если начнёшь всматриваться в детали, поймёшь, что именно это за шрифт.
Автор PT Root — Виталий Кузьмин
Чтобы понять наверняка, перед вами нейтральный шрифт или нет, можно сравнить его с Гельветикой, Ариалом, Робото или Сан Франциско. Если выбранный шрифт привлекает внимание не больше, чем эти шрифты, то он нейтральный.
Для сравнения: нейтральные и акцидентные шрифты
При этом необязательно, чтобы шрифт был вовсе лишён характерных особенностей. Например, у Рута самая простая форма из спокойно-текстовых шрифтов. Там, где возможны варианты, например, У с хвостиком или без, Виталий выбирал самый лаконичный. Ещё у Рута узковатые пропорции и небольшая «оквадраченность» круглых знаков, за счёт которой буквы выглядят чуть крупнее. В результате Рут вышел немного брутальным, хотя в наборе, особенно в некрупном кегле, это почти незаметно.
Варианты А и У
Параметры шрифта
Универсальные шрифты используют для передачи информации, а не привлечения внимания (для этого существуют акцидентные шрифты). Чтобы передать информацию эффективно, важно понять, что помешает читателю прочитать текст. Вот основные ограничения, с которыми сталкиваются читатели:
Ограничения для чтения. При выборе шрифта стоит учесть, какие есть ограничения в проекте и справится ли с ними шрифт
Когда мы выбираем шрифт, важно, чтобы его параметры компенсировали те ограничения, которые есть в проекте. Например, если вы делаете навигационные таблички, то сталкиваетесь сразу с тремя ограничениями: мало места для надписи, мало времени на чтение, а ещё и текст далеко.
Вот несколько параметров, на которые стоит обратить внимание, при выборе нейтрального рабочего шрифта:
- Узкие пропорции и короткие выносные элементы делают шрифт компактнее. Такие шрифты особенно хороши, когда есть ограничения по длине текста: на сайте, в мобильном приложении или навигации.
- Униширинные шрифты (например, бесплатный компаньон Рута PT Root UI) подходят для интерфейсов. В таких шрифтах ширина площадки знака не меняется от начертания к начертанию, что удобно при вёрстке. Скажем, дизайнер подготовил макет мобильного приложения, а заказчик попросил сделать пункты меню пожирнее. С униширинным шрифтом, даже если поменять начертание на более жирное, буквы останутся на тех же местах и строка не «поедет».
Униширинный PT Root UI: во всех начертаниях ширина площадки знака остаётся одинаковой
- Высокие строчные буквы. Для сложных условий чтения, особенно текстов в мелком кегле (например, инструкций на упаковке), лучше выбрать шрифт с высокими строчными буквами с короткими выносными элементами. Так знаки займут меньше места, но их всё равно будет легко разглядеть.
- Просторные межбуквенные расстояния. Для длинных текстов, мелких подписей и других сложных условий для чтения стоит брать шрифты с более свободными промежутками между буквами. Это известный оптический эффект: если шрифт мелкий — то промежутки кажутся меньше и буквы начинают слипаться.
В общем, чтобы ничто не отвлекало аудиторию от чтения текста, лучше выбирать шрифты с нейтральными и привычными параметрами: равноширинные, с достаточно высокими строчными буквами и достаточными межбуквенными расстояниями.
У Рута узкие пропорции, достаточно высокие строчные буквы с короткими выносными элементами и просторные межбуквенные расстояния
Знаковый состав
Для универсальных шрифтов важен широкий знаковый состав. Так будет выше шанс, что не придётся подбирать дополнительный шрифт, если понадобится локализировать сайт или срочно добавить стрелочек в дизайн.
Поддержка языков и типографики в PT Root
Вот что полезно и, скорее всего, пригодится в универсальном рабочем шрифте:
- расширенная кириллица и латиница — это значит, что шрифт поддерживает большинство языков России, СНГ и Европы, что значительно упростит локализацию продукта;
неалфавитные знаки — стрелки, табличные и пропорциональные цифры, геометрические фигуры, звёздочки, математические символы (в Root даже есть знак диаметра) и так далее.
Есть отдельные шрифты — наборы символов, но они часто не подходят к основному шрифту по каким-то параметрам, например, по контрасту. Поэтому удобно, когда в шрифте уже есть нужные неалфавитные символы, чтобы дизайнеру не пришлось их отрисовывать от руки.
Знаковый состав можно посмотреть на странице шрифта на сайте: в аннотации или отдельном разделе (например, на страничке конкретного начертания).
Начертания
Начертание — один стиль внутри шрифта. Это комплект знаков шрифта одного определённого рисунка, наклона, пропорций, контраста и насыщенности. Например, курсив — это начертание.
Чем больше начертаний в шрифте, тем больше возможностей для его использования. Так, один шрифт можно использовать для текстов разной иерархии: заголовков, подписей, выделений внутри текста или колонтитулов. А ещё на разных площадках — скажем, регулярное начертание для сайта, а зауженное в интерфейсе мобильного приложения. В общем, чем у шрифта больше начертаний, тем он функциональнее, но и тем легче в них запутаться.
Начертания в PT Root
В Руте десять начертаний с градацией по жирности от Hairline до Black — как раз такая градация в самых популярных шрифтах для веба. Начертания от Thin до Black удобно обозначать в CSS числами от 100 до 900. Давайте на примера Рута посмотрим, для чего какое начертание.
- Hairline — сверхтонкое начертание для акциденции и айдентики, хорошо смотрится в крупном кегле.
Thin и Extra Light — тонкие начертания, тоже для заголовков и крупного кегля.
Light — может заменить Regular в крупном кегле или при инверсии на экране (например, для тёмной темы в мобильном приложении).
Regular — регулярное начертание для длинных текстов на экране и в печати.
Medium и DemiBold — хороши для навигации и для выделений в тексте — когда хочется пожирнее регулярного, но Bold — уже слишком.
Bold — жирное начертания для выделений в тексте, заголовков и подзаголовков.
Extra Bold, Black — сверхжирные начертания для акциденции.
В книге «Уступите место драме» (автор Людмила Сарычева, дизайнер Евгений Арутюнов) регулярное начертание Рута используется для примеров в тексте, а жирное — для заголовков и важных мыслей
Все начертания объединены в вариативную версию. В ней можно плавно переключаться между начертаниями и выбрать любую насыщенность. При этом небольшой вес вариативной версии ускоряет загрузку сайта.
Я долго подбирал линейку начертаний — добивался того, чтобы насыщенность увеличивались гармонично, но делал это не просто на глаз, а пытался найти закономерность. Линейная интерполяция не подходила, поэтому пробовал разные варианты (например, формулы Лукаса де Гроота и Пабло Импаллари).
В итоге я пришёл к некоему ряду коэффициентов и скорости их наращивания — своему варианту распределения насыщенностей, который меня устроил и по визуальной составляющей самих начертаний, и по логике чисел.
Формулы и подсчёты
Бонус: подборка универсальных шрифтов
Собрали подборку проверенных универсальных шрифтов с развитой системой начертаний и широким знаковым составом. В списке есть как бесплатные, так и платные шрифты (такие, лицензию на которые можно оплатить российской картой) разных шрифтовых студий.
Самый простой способ протестировать Рут и другие наши шрифты — тайп-тестер на сайте магазина, он поддерживает все технические возможности шрифтов и не требует регистрации. А ещё у нас есть расширение для Хрома Fontoscope, с которым можно попробовать шрифт на любом сайте, и приложение Fontoscope — оно устанавливает тестовую версию шрифта прямо на ваш компьютер и позволяет работать с ним в любой программе — от Figma до AfterEffects.
Подписывайтесь на наш Телеграм-канал о шрифтах и типографике — там много всего полезного и красивого.
Над статьёй работали Даша Савина, Виталий Кузьмин, Александра Королькова и Галина Кунарёва
От Open Sans отличается буквой "у" ... но стоит космических денег, так еще цена лицензии зависит от кол-ва посещенных пользователей (внезапно) ....
Для тех, у кого нет бюджета на шрифт, есть бесплатная версия Рута Root UI, плюс большая подборка бесплатных и системных шрифтов с достаточно хорошей кириллицей: https://info.paratype.ru/no-funds-for-fonts/
спасибо за подборку шрифтов ,как раз то что нужно было
Рады помочь)
Подбор шрифта, как отдельный вид искусства)))