Как правильно выбрать шрифт для диджитал

Посмотрите, как сильно в восприятии отличаются друг от друга два шрифта: весьма нейтральный гротеск Graphik и экспериментальный Potexa от исследователей из Kiosk:

А теперь представьте, как будет выглядеть длинный текст, набранный Potexa: вряд ли будет просто прочитать пару страниц такой книги. Однако постер, на котором вы увидите крупный заголовок из этих же причудливых букв, будет выглядеть эффектно. Напротив, пара десятков страниц, набранных Graphik, может быть совершенно спокойно прочитана — конечно, если условиться, что это не будет полотном из заглавных букв.

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

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

Давайте посмотрим на то, как число 1972 в сильном приближении выглядит на бумаге и на экране:

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

Если мы уменьшим размер шрифта, то результат будет совсем нечитаем:

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

Так появились всем знакомые Verdana и Tahoma — шрифты, у которых толщина штрихов совпадает с размером пикселя при определённом кегле.

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

UI-дизайнерам прекрасно знакома ситуация, когда в крохотной ширине нужно разместить чуть ли не столько же информации, сколько отображается на целом экране ноутбука. Для того, чтобы удовлетворить столь сложные требования, шрифты для digital выделились в целое направление — интерфейсные шрифты.

Если раньше для большинства задач достаточно было двух видов насыщенности шрифта — нормального, Regular и жирного, Bold, — то сегодня для нас привычно искать в гарнитурах и другие градации: сверхсветлую (Ultra Light), светлую (Light), полужирную (Medium) и другие. Без них интерфейсный шрифт не будет таковым: каждая насыщенность должна закрывать ту или иную задачу.

Заметьте, что в книгах вы не встретите такого обилия разновидностей — они были попросту не нужны. Человеку, который жил на заре печатного дела, даже в голову бы не пришло, зачем нужна насыщенность Medium — ведь есть Regular и Bold.

Одними из самых известных интерфейсных шрифтов являются San Francisco от Apple и Roboto от Google. Эти знакомые всем владельцам iPhone и смартфонам на Android шрифты имеют не только множество начертаний, но и другие особенности, которые делают их по-настоящему интерфейсными.

Возьмем, например, особое начертание San Francisco — Compact, которое было разработано специально для отображения на крохотных экранах Apple Watch.

Для удобства чтения с часов — а особенно на ходу или во время пробежки — важно формировать комфортные апроши — расстояния между соседними буквами. Для этого San Francisco Compact обладает более «прямыми» буквами, чем начертание Pro Text. Это сделано для того, чтобы при сравнительно одинаковой длине строки расстояние между буквами было больше у начертания для часов, чем у начертания для других устройств.

Ещё одним наглядным примером будет сравнение культового Gill Sans, который не адаптирован для интерфейсов и схожего с ним по характеру Gerbera от Brownfox. Если в крупном кегле трудностей с чтением у Gill Sans нет, то в маленьком размере явное преимущество у Gerbera.

При одном и том же малом кегле и насыщенности «a milliliter» читается намного лучше в исполнении Gerbera за счет хорошего контраста, равномерных внутрибуквенных просветов и бó‎льших апрошей.

Посмотрим поближе на разницу между шрифтами:

Gill Sans — более контрастный шрифт, чем Gerbera. Это означает, что штрихи — элементы, из которых состоят буквы, цифры и знаки — сильно отличаются друг от друга по толщине. Это особенно заметно на примере букв a, t и r: так называемое «плечо» у r в исполнении Gerbera более равномерное по толщине, чем у Gill Sans. А засечка у буквы t в Gill Sans более острая, чем у его «соперника». За счёт этого Gerbera лучше отображается на экранах, поскольку такая засечка вероятнее всего будет отображена целыми пикселями.

Такими деталями и определяется хороший шрифт для экранов.

Идеальным интерфейсным шрифтом является тот, который поддерживает кириллицу и символы для разных языков мира. Чтобы и знак рубля был, и буква ять: кто знает, куда уйдет ваш проект или продукт?

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

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

Конечно, шрифт должен быть качественным и обладать своим уникальным характером.

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

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

Было бы странным не упомянуть пионеров ПараТайп, подарившим всем нам PT Sans, создавшим прекрасную Circe и еще очень много чего хорошего (например, блог и ценнейший справочник), но внимание хотелось бы остановить на менее известных, но сильных командах, делающих кириллицу и современные диджитал-шрифты.

Если вы еще не слышали о type.today, то это только повод для радости: такого количества качественной кириллицы от Илья Рудермана и Юрия Остроменцкого хватит на десятки проектов вперед и подарит не меньшего количества вдохновения. Так же, как и ПараТайп, проект ведет свой полезный журнал. А недавно команда запустила новый магазин, полностью посвященный экспериментальным шрифтам — tomorrow.

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

Нельзя обойти стороной и The Temporary State — смелую студию, которая любит экспериментировать. Не сказать, что разработанные дизайнерами шрифты умеют решать интерфейсные задачи, но для того, чтобы украсить проект крупными заголовками — это настоящий клад.

Московская студия Contrast Foundry разработала не так много шрифтов (как хотелось бы!), но за ними определенно стоит следить: чего стоит одна CoFo Chimera.

За экспериментами — пускай и совсем не интерфейсными — точно стоит зайти в Kiosk.

Пожалуй, благодаря отечественной моде — привет бренду Гоши Рубчинского — западные студии полюбили кириллицу и перестали совсем уж обходить ее стороной. Загляните в Dynamo Typefaces за Favorit Pro или в Grilli Type за GT Pressura.

Почитать о типографике можно в журнале «Шрифт» — жаль только, что статьи выходят достаточно редко.

Делюсь прекрасным и бесплатным интерфейсным шрифтом от ПараТайпа: PT Root UI.

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