10 декабря 2019

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

Статья впервые была опубликована на www.likeni.ru.

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

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

Как правильно выбрать шрифт для диджитал
Шрифт Graphik. Commercial Typetype.today
Как правильно выбрать шрифт для диджитал
Шрифт Potexa. Kiosk

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

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

Что такое «шрифт для диджитал»?

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

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

Как правильно выбрать шрифт для диджитал
На бумаге
Как правильно выбрать шрифт для диджитал
На экране

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

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

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

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

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

Особенности интерфейсных шрифтов

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

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

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

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

Как правильно выбрать шрифт для диджитал
Насыщенности шрифта Graphik

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

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

Как правильно выбрать шрифт для диджитал
Сравнение начертаний шрифта San Francisco от Apple

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

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

Как правильно выбрать шрифт для диджитал
Сравнение Gill Sans и Gerbera

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

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

Как правильно выбрать шрифт для диджитал
Сравнение деталей Gill Sans и Gerbera

Gill Sans – более контрастный шрифт, чем Gerbera. Это означает, что штрихи – элементы, из которых состоят буквы, цифры и знаки – сильно отличаются друг от друга по толщине. Это особенно заметно на примере букв at и 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.

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

Дальше — большe

Идеи, которые нас вдохновляют, видео-интервью и переводы исследований, которые были нам полезны в процессе работы.

4 июля 2019

Как «Смена» создавала шрифт для государства в интернете

aic

7 сентября 2016

Ask-Me-Anything: Сергей Попков

21 мая 2019

Тесты в ритейле: кому это нужно и как их проводить

aic

5 сентября 2017

Как сортировать карточки быстро

23 января 2019

Культура кейса. Как научиться упаковывать свои проекты с иголочки

28 января 2019

Когда нужно бросить Sketch и стать дизайн-менеджером