4 июля 2019

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

Стас Поляков, креативный директор дизайн-компании «Смена», которая с 2016 года занимается созданием дизайн-системы для всех государственных сайтов, рассказал, как родился шрифт Golos RF и зачем он понадобился.

Работу над шрифтом мы начинали вместе с коллегой Тимом Чёрным. В итоге получившимся шрифтом вскоре будут «говорить» все официальные сайты — от федеральных министерств и ведомств до интернет-площадок муниципальных властей.

Зачем дизайн-системе шрифт

В основе любой дизайн-системы лежит шрифт. Потом на него мало кто обращает внимание, особенно если он хорош и действительно лежит в основе той системы, в которой используется. Но начинается всё именно с него. Шрифт — это на­чаль­ная точ­ка, ДНК, мо­ле­ку­ла лю­бо­го ди­зайн-про­ек­та. И шрифт должен не втискиваться в систему, а быть её основой.


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

Зачем нужна узнаваемость для государства? Она помогает создать «доверенную зону», чтобы со временем каждый понимал, что он находится именно на государственном сайте и написанному можно верить. Такая узнаваемая доверенная зона важна как для сайтов с госуслугами, где пользователи оставляют свои личные данные, так и для справочных или новостных сайтов, где новости могут подделывать.

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

С чего мы начали

Какой шрифт должен быть в основе дизайн-системы Российской Федерации? На этот вопрос мы отвечали вместе со шрифтовым дизайнером Александрой Корольковой и компанией «Паратайп». Александра не только практик и теоретик кириллического шрифтового дизайна, но и лауреат премии имени Шарля Пеньо (2013), вручаемой ATypI (Международной типографической ассоциацией) раз в несколько лет дизайнеру до 35 лет «за выдающийся вклад в шрифтовой дизайн».

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

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

Во-вторых, создание цифрового образа государства, который можно узнаваемо передать в каждом новом элементе структуры. Это как придумать «Лего», состоящее из кусков реальной жизни.

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

Например, «очевидность и понятность». Принцип сам по себе кажется простым: классно быть понятным. В нашем случае, применяя этот принцип на деле, нужно держать в голове широту и разнообразность аудитории, которая не оставляет никакой возможности её описать.

Выбирать готовое или создавать

Когда встаёт вопрос о выборе шрифта, всегда есть вариант взять что-то готовое и проверенное временем. Так происходит чаще всего. Но мы пошли по другому пути. Мы решили нарисовать новый шрифт, придерживаясь принципа Cyrillic First. И на это у нас было несколько причин.

Ни один существующий шрифт невозможно сделать своим, а государственный шрифт должен быть целиком и полностью отдан только в официальное использование (помните скандал с использованием Times New Roman?). Во-вторых, люди создали много шрифтов, решая разные задачи. Но нашу задачу, по крайней мере в кириллице и для русскоязычного мира, не решал ещё никто. Именно поэтому мы обратились в «Паратайп» к Саше Корольковой.

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

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

Как мы рисовали шрифт

Первое, что мы обсудили с командой Сашей Корольковой, — мы делаем шрифт буквально для всей страны. Каждое слово в сервисе, будь то текст на кнопке, заголовок статьи или какое-нибудь объявление, должно быть понятно и приятно всем жителям нашего государства.

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

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

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

Ещё есть известный в шрифтовой среде пример — Rijksoverheid Sans и Serif, система шрифтов для голландского правительства. Поэтому, с одной стороны, пропорции шрифта должны были быть адаптированы под экран (крупные строчные знаки, короткие выносные элементы, увеличенные межбуквенные расстояния), а с другой стороны, шрифт задумывался как открытый и гуманистический.Саша Королькова«Паратайп»

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

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

Незадолго до начала разработки Golos RF в мобильных интерфейсах и операционных системах сменился тип шрифтов с открытого гротеска (лучше подходящего для экранов низкого разрешения) на закрытый гротеск (поскольку разрешение экранов становится выше и ограничения по типу шрифта снимаются). И для разработчиков дизайн-системы, на фоне уже ставших повседневными Roboto и San Francisco, шрифт выглядел непривычно.

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

О характере шрифта

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

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

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

И что теперь

Как объясняет Александра Королькова, сейчас в шрифте Golos RF две основных линейки — интерфейсная и текстовая. Начертания для интерфейсов более узкие, модульные. При смене жирности шрифта не меняется длина строки. Интерфейсный шрифт выглядит строгим и рациональным. Шрифты текстовой линейки — более широкие, с более плавными линиями.

По характеру они вписываются в ряд San Francisco — Roboto — Segoe, но с самого начала разработаны для набора кириллицей. В нынешних реалиях характер текстовых начертаний можно описать как спокойный, уверенный, но при этом «сдержанный», чтобы не отвлекать внимание читателя на себя, а концентрировать его на содержании текста.

Golos RF уже можно называть официальным шрифтом Российской Федерации. Теперь он — голос государства в интернете, а со временем, может быть, выйдет и в офлайн. Сейчас мы уже используем его на практике, одновременно проверяя на удобочитаемость и апгрейды.

В нашем распоряжении пока только текстовая версия шрифта. Вскоре появится ещё дисплейная (для крупных наборов, заголовков), сериф (для набора долгих текстов и документов), моно (для кода).

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

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

9 июля 2018

Квартирник на сто человек: какой должна быть рабочая атмосфера в дизайн-студии

19 декабря 2016

Разрушаем шесть мифов о веб-лейаутах

18 октября 2017

Минимально жизнеспособное дизайн-портфолио

aic

20 июля 2018

Зачем Google и Apple меняют подход к проектированию интерфейсов

31 мая 2018

AIC Design Day 19 мая 2018 года: Все видео и презентации

aic

3 декабря 2018

Что такое UX/UI дизайн и почему об этом все говорят