Шрифт яндекса – Шрифты — Яндекс.Знатоки

Шрифт Яндекса — Yandex Sans / Блог компании Яндекс / Хабр

23 апреля 2016 на Я.Субботнике для дизайнеров мы анонсировали наш собственный шрифт Yandex Sans. Мы работали над ним два с половиной года и очень счастливы наконец поделиться результатом. В этом посте я расскажу о том, зачем мы всё это задумали, как происходила работа, что получилось в результате и что будет дальше. Пост написан по мотивам нашего рассказа на Субботнике.

Зачем вообще думать о шрифте?

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

Шрифт  —  это один из базовых «голосов» графического дизайна наравне с цветом, формой и т. д. Шрифт влияет на то, как воспринимается информация, им набранная. У Джона Маэды в его лекции на TED я подсмотрел очень наглядный способ это продемонстрировать. Это история о форме и содержании. Давайте возьмем некоторое содержание и попробуем, зафиксировав его, менять форму. Пусть нашим содержанием будет хорошо известный девиз Яндекса — «найдётся всё».

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

Так обычно и говорит Яндекс. Это наше сообщение, произнесенное нашим же голосом.

* * *

А что, если бы мы использовали для этого же содержания вот такой шрифт?

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

* * *

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

* * *

А если так?

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

* * *

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

* * *

А ведь можно и вот так:

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

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

А что и как сейчас говорит Яндекс?

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

Кстати, Влад Головач рассказал, что, по его мнению, по-русски правильно называть этот шрифт Ариэль, так как изначально он был назван созвучно с персонажем «Бури» Шекспира. Но я пока, с вашего позволения, продолжу писать «Ариал».

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

Почему именно Ариал? Дизайнерам должна быть хорошо известна его история. Ариал базируется на пропорциях и рисунке букв Гельветики, одного из самых знаменитых и даже культовых шрифтов XX века. Гельветика появилась в 1957 году под именем Neue Haas Grotesk. Если по какой-то причине вы пропустили фильм Helvetica, обязательно посмотрите хотя бы этот трейлер (а лучше фильм целиком, конечно):

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

Когда Microsoft в 80-х выбирали шрифт для своей операционной системы Windows, они по какой-то причине решили не платить за лицензию на Гельветику, а вместо этого попросили компанию Monotype сделать для них собственную версию этой гарнитуры. Так появился Ариал  —  «гельветика для бедных» по меткому выражению кого-то из наших шрифтовых дизайнеров. Не буду здесь углубляться в сравнение Ариала и Гельветики. Любой желающий без труда убедится, что они действительно очень близки:

Слайд Кристиана Шварца показывает наложение Ариала и Гельветики

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

• Пропорции и рисунок букв местами вызывают вопросы — особенно в кириллице, многие буквы которой выглядят откровенно странно.
• Нет вариаций насыщенности (то есть толщины линий букв). Только обычный и жирный (отдельно существует еще Arial Black). Для современных интерфейсов этого уже не хватает, нужны разные степени насыщенности, легкие тонкие начертания, полужирные и т. д.
• Плохая читаемость в мелких кеглях. Из-за закрытого рисунка букв в размерах ниже 12px символы начинают «слипаться» и читаемость страдает. В веб-интерфейсах Яндекса самые мелкие надписи мы набираем открытой Верданой, лишенной этого недостатка.

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

На Андроиде нашим «голосом» оказывается довольно холодно-технологично-инженерный шрифт Roboto, в iOS — максимально нейтральный San Francisco, в Windows — характерный Segoe, к кириллице которого есть много вопросов.

* * *

А как звучат рекламные коммуникации Яндекса? Подборка Тараса снова показывает характерное:

Это Textbook New, он же гарнитура Букварная, впервые разработанная в СССР в 1958 году Еленой Царегородцевой в НПО «Полиграфмаш» для набора — действительно — букварей и школьных учебников. Добрый шрифт, знакомый каждому, чьё детство проходило на советском (и немножко постсоветском) пространстве. Свой, родной. Но несколько странный для современной высокотехнологичной компании в XXI веке.

С этим набором шрифтов мы жили до текущего момента, однако давно ощущали его ограничения. Мы чувствовали, что нам:

• недостаточно выразительных и технических возможностей Ариала и Текстбука;
• хочется иметь свой голос в мире чужих платформ.

Всё это привело к размышлениям о том, каким должен быть шрифт Яндекса.

Каким должен быть шрифт Яндекса

Мы сформулировали требования к нашему шрифту:

1. Шрифт должен иметь своё лицо, отличаться от конкурентов

Конкуренты — это, в первую очередь, Roboto, San Francisco, Segoe — шрифты интерфейсов Google, Apple и Microsoft соответственно.

2. И в то же время быть спокойным, нейтральным, не слишком характерным

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

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

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

3. Выражающим наши ценности

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

• открытый,
• современный,
• умный,
• нейтральный,
• локальный,
• технологичный, но с человеческим лицом.

Мне особенно близок последний пункт. Хотя мы — современная высокотехнологичная компания, нашим продуктам всегда была свойственна теплота и человечность. Мы точно не бездушный робот-андроид.

4. Сделанным в первую очередь для кириллического набора

Как известно, большинство шрифтов сначала создаются для латиницы, и лишь позже им дорисовывают кириллическую версию. Иногда это получается сделать более удачно, иногда  — менее. Для нас сразу было очень важно, чтобы Яндекс говорил по-русски без акцента. Применительно к шрифту это означает, что кириллица должна создаваться одновременно с латиницей или даже раньше.
Ну и конечно шрифт должен иметь все необходимые нам символы и буквы, использующиеся в странах, где мы работаем: России, Украине, Беларуси, Казахстане, Турции и др., знак рубля и т. д.

5. Очень хорошо читаемым, разборчивым и применимым во всех современных средах

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

6. Совпадающим по основным метрикам и пропорциям с Ариалом

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

7. Имеющим несколько степеней насыщенности

То есть толщины линий:

Сейчас даже для веб-интерфейсов уже не хватает просто «жирного» и «нежирного», нужны градации.

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

Команда

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

Ира Волошина, которая начинала проект в Яндексе, обратилась к Илье Рудерману, который, в свою очередь, порекомендовал подключить Кристиана Шварца.

В итоге нам очень повезло работать над шрифтом с Ильёй и Кристианом с его студией Commercial Type.

* * *

Кристиан Шварц в мире шрифтового дизайна  — настоящая суперзвезда мирового уровня. Он сотрудничал с Font Bureau (у них вообще звездный состав, включая, например, Мэтью Картера, автора шрифтов Verdana и Georgia), работал с Эриком Шпикерманном. Среди его работ — шрифты для американского Esquire, Deutsche Bahn и огромная система начертаний для британской газеты The Guardian, получившая международные награды. Кристиан удостоен премии лондонского Design Museum и был включен журналом Wallpaper в список «40 наиболее влиятельных дизайнеров до 40 лет».

* * *

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

* * *

В команде с Кристианом и Ильёй в роли ведущего дизайнера работал Мигель Рейес, дизайнер нью-йоркского офиса Commercial Type, который как и Илья обучался дизайну шрифтов в Голландии.

Хинтингом и сборкой шрифтов занимался Марк Рекорд.

Нам очень повезло, что удалось собрать для проекта такую звездную команду.

Со стороны Яндекса над шрифтом работало на разных этапах много замечательных людей. Проект начинала Ирина Волошина. Более чем активно участвовали Тарас Шаров, которого я уже упоминал в этом посте, Данил kovchiy Ковчий и Сергей Фёдоров, Стас plkv Поляков, Иван Semus Семенов, Андрей karmatsky Кармацкий, Миша Мильников, Рома Искандаров, Андрей Лось, Настя Ларкина, Сережа 3apa3a Томилов, Никита Бровиков, Дима Середа, Саша Володин и очень-очень многие другие. Бесконечное количество раз бесконечное количество дизайнеров присылали правки, замечания и пожелания. Мне бы очень хотелось поблагодарить всех, и я очень боюсь кого-то забыть, поэтому не буду перечислять каждого.

Как работали над шрифтом

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

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

Flat — более контрастный и более острый, характерный:

Round — более дружелюбный и мягкий:

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

Шрифт, правда, всё равно выглядел довольно «колючим», поэтому в следующих версиях окончания штрихов смягчили:

<img src=«cdn-images-1.medium.com/max/800/1*XWqkkUy888GRSMI2NsgD_Q.png» alt=«image»/>

С самого начала у нас было в работе две версии шрифта: Text и Display:

Увидев слово Display, можно подумать, что эта версия предназначена для экранов, но это не так. В типографике Text используется для основного набора, мелких кеглей, а Display — для крупного, например, для заголовков. Можно увидеть, что буквы Display более характерные, вычурные.

В курсиве мы перебрали большое количество вариаций отдельных знаков. Долго не могли выбрать форму букв г, д, е, и, й, т, ц, ч, ш, щ, f. В конце концов после бесчисленных проб остановились на таком варианте:

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

Параллельно всё время происходило бесконечное количество технической работы, подбора кернинговых пар, хинтинга, работы над несколькими начертаниями:

Что получилось в результате

Финальная (на сегодняшний день) версия шрифта Yandex Sans выглядит так:


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

А вот как выглядит примерка шрифта в естественной среде:

Yandex Sans в макете результатов поиска. Автор — Даня Ковчий

Концепт интерфейса Яндекс.Музыки с новым шрифтом. Автор — Даня Ковчий

Концепт главной страницы Яндекса с новым шрифтом. Автор — Даня Ковчий

Прямо сейчас мы уже используем новый шрифт в интерфейсе нашего Лончера на Андроиде и на странице О компании:

Теперь миссию Яндекса и историю компании можно прочитать нашим «голосом» — нашим новым шрифтом.

А вот как выглядят примеры фраз из начала поста, набранные Yandex Sans:

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

Что дальше

Многие спрашивают, планируем ли мы выложить новый шрифт в открытый доступ. Сейчас мы этого не планируем. Yandex Sans — голос нашего бренда, такой же как логотип Яндекса. Поэтому и использоваться он будет только в наших продуктах и коммуникациях. Apple и Google раздают свои шрифты открыто для того, чтобы разработчики приложений под iOS и Android могли ими воспользоваться. У нас такой задачи прямо сейчас нет, поэтому и отдавать наружу шрифт не планируется.

Впереди у нас самое интересное. Как известно, с запуском продукта работа над ним только начинается. Нам еще только предстоит по-настоящему тестировать Yandex Sans в продуктах. И если в коммуникациях он совсем скоро начнет появляться, то на главной странице Яндекса или в результатах поиска Yandex Sans точно не стоит ждать в ближайшее время. Впрочем, начало положено, и это, как мне кажется, самое главное.

habr.com

«Яндекс» представил собственный шрифт Yandex Sans — Офтоп на vc.ru

Шрифт разработали дизайнеры Илья Рудерман, который делал шрифты для издания «Афиша», и Кристиан Шварц, работавший над системой начертаний для The Guardian. Команда работала над Yandex Sans два с половиной года. Стоимость разработки шрифта в «Яндексе» не уточнили.

В своей презентации Рудерман и Шварц объяснили необходимость создания шрифта нехваткой возможностей Arial и Textbook, которые использовались «Яндексом» до этого. Кроме того, «разумнее инвестировать в свой шрифт, чем платить за лицензии», говорится в презентации.

Директор по дизайну «Яндекса» Константин Горский в разговоре с vc.ru сказал, что в компании «давно почувствовали, что не хватает технических и выразительных возможностей шрифтов, которыми мы пользовались». По его словам, Yandex Sans соответствует техническим требованиям любой среды, а также выражает ценности компании.

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

— Константин Горский, директор по дизайну «Яндекса»

На вопрос о планах компании по продаже лицензии на Yandex Sans Горский ответил, что шрифт будет использоваться только в продуктах и коммуникациях компании. «Это голос нашего бренда, такой же, как логотип «Яндекса»», — пояснил он.

Старый шрифт (Arial) Новый шрифт (Yandex Sans)

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

Шрифт Textbook New, который компания использует в коммуникациях и рекламы, «многими воспринимается как очень добрый и тёплый, но несколько старомоден, а нам хотелось бы обрести более современное звучание», говорится в презентации.

Варианты написания шрифтами различных компаний; сверху вниз: Yandex Sans, Segoe (Microsoft), San Francisco (Apple), Roboto (Google)

На данный момент шрифт используется только на странице «О компании» и в Yandex Launcher для Android. Компания планирует постепенно переводить на него свои интерфейсы, однако, по словам Горского, это не очень быстрый процесс. «Шрифту ещё только предстоят «боевые» тестирования, поэтому о том, насколько широко мы будем его использовать, пока говорить рано», — пояснил он.

vc.ru

Журнал «Шрифт» • Разработка шрифта Yandex Sans

13 декабря 2016

Евгений Юкечев

Рустам Габбасов

Ирина Волошина

Константин Горский

Сергей Фёдоров

Илья Рудерман

Мигель Рейес

Кристиан Шварц

н­декс за го­ды сво­е­го су­ще­ство­ва­ния про­явил се­бя как ком­па­ни­я с ред­ким для рос­сий­ско­го IT-сек­то­ра ка­че­ством — вни­ма­ни­ем к ви­зу­аль­но­му язы­ку и ди­зайн-мыш­ле­нию. По­сле про­дол­жи­тель­но­го со­труд­ни­че­ства со Сту­ди­ей Ле­бе­де­ва в 2009 го­ду ком­па­ния на­ча­ла­ вы­стра­и­вать соб­ствен­ный от­дел ди­зай­на. Борь­ба за луч­шие кад­ры на рын­ке, став­ка на ком­форт­ную ра­бо­чую сре­ду, ор­га­ни­за­ция об­ра­зо­ва­тель­ных ме­ро­при­я­тий — за­пуск Шко­лы ди­зай­на и про­ек­та Мо­би­ли­за­ция — всё в ко­неч­ном счёте ра­бо­та­ет на раз­ви­тие про­дук­тов и ка­пи­та­ли­за­цию ком­па­нии. До не­дав­них пор су­ще­ство­ва­ла толь­ко од­на об­ласть, ко­то­рую «Ян­декс» не спе­шил ре­фор­ми­ро­вать, — шриф­ты и ти­по­гра­фи­ка. Это по­ло­же­ние из­ме­ни­лось по ини­ци­а­ти­ве Ири­ны Во­ло­ши­ной, ди­зайн-ди­рек­то­ра «Ян­дек­са» в пе­ри­од 2013–2015 го­дов. В бли­жай­шем бу­ду­щем вне­дре­ни­е шриф­та Yandex Sans кос­нёт­ся всех про­дук­тов и мно­го­ми­лли­он­ной ауди­то­рии ком­па­нии. Остаёт­ся до­ба­вить: ис­поль­зуя свой шрифт, «Ян­декс» вы­пол­ня­ет и «са­ни­тар­ную» функ­цию, спа­са­я поль­зо­ва­те­лей от ки­рил­ли­цы шриф­та Arial.

За­чем «Ян­дек­су» свой шрифт? В ка­кой мо­мент ком­па­ния ре­ши­лась на из­ме­не­ния?

Ири­на Во­ло­ши­на: Мы за­ду­ма­лись о соб­ствен­ном шриф­те, ко­гда вста­ла за­да­ча объ­еди­не­ния всех сер­ви­сов, про­дук­тов и ком­му­ни­ка­ций в еди­ную эко­си­сте­му. «Ян­декс» раз­ви­вал­ся ак­тив­но, и за это вре­мя воз­ник­ло огром­ное ко­ли­че­ство раз­но­род­ных ре­ше­ний. Нам был не­об­хо­дим один зна­ме­на­тель для всей си­сте­мы на­ших про­дук­тов. Учи­ты­вая, что се­го­дня ин­тер­фей­сы стре­мят­ся к ми­ни­ма­лиз­му, у ди­зай­не­ра из гра­фи­че­ских вы­ра­зи­тель­ных средств остаёт­ся все­го ни­че­го: цвет, от­но­ше­ния бе­ло­го к плот­но­му пят­ну, об­щая пла­сти­ка, а всё осталь­ное — это ти­по­гра­фи­че­ские ре­ше­ния. По­это­му ба­зо­вый кир­пи­чик — это, ко­неч­но, шрифт.

Мы ре­ши­ли, что нам нуж­но уни­вер­саль­ное шриф­то­вое се­мей­ство, ко­то­рое ра­бо­та­ло бы в ком­му­ни­ка­ци­ях и в про­дук­тах. Эти тре­бо­ва­ния по боль­шо­му счёту про­ти­во­ре­чат друг дру­гу: ком­му­ни­ка­ци­ям ну­жен ха­рак­тер и за­по­ми­на­е­мость, а сер­ви­сам — удоб­ство, чи­та­бель­ность и бóль­шая, чем в ком­му­ни­ка­ци­ях, ви­зу­аль­ная ней­траль­ность. Бы­ло до­воль­но не­про­сто сов­ме­стить столь раз­ные осо­бен­но­сти и со­здать один шрифт, со­от­вет­ству­ю­щий этим тре­бо­ва­ни­ям. Нам важ­но бы­ло оста­вать­ся за­по­ми­на­е­мы­ми на чу­жих тер­ри­то­ри­ях, на чу­жих плат­фор­мах и опе­ра­ци­он­ных си­сте­мах, а про­дук­там со­хра­нять свою кросс-про­дук­то­вую цель­ность, при этом не раз­дра­жая поль­зо­ва­те­лей. И мы шли к та­кой бес­шов­ной струк­ту­ре, где лю­бые эле­мен­ты си­сте­мы про­дук­тов ра­бо­та­ли бы ор­га­нич­но, ис­поль­зуя еди­ный гра­фи­че­ский язык.

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

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

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

Кон­стан­тин Гор­ский: Ока­за­лось, что на­ши со­труд­ни­ки до­воль­но по­хо­жим об­ра­зом пред­став­ля­ют се­бе «Ян­декс». Ви­ди­мо, цен­но­сти ком­па­нии иг­ра­ют в этом не по­след­нюю роль, и это здо­ро­во. Мы по­пы­та­лись рас­ска­зать об этом Кри­сти­а­ну Швар­цу и Илье Ру­дер­ма­ну, по­ка­зы­ва­ли им на­ши про­дук­ты, эво­лю­цию на­ше­го ди­зай­на и но­вые на­ра­бот­ки. А они пред­ла­га­ли скет­чи, ва­ри­ан­ты ха­рак­те­ра шриф­та, из ко­то­рых мы вы­би­ра­ли. При­ня­тие ре­ше­ний бы­ло, ска­жем так, очень не­про­стым, по­сколь­ку мы при­вык­ли вни­ма­тель­но от­но­сить­ся к мне­нию каж­до­го, а мне­ний бы­ло очень и очень мно­го. От­ча­сти это ста­ло при­чи­ной то­го, что про­цесс вы­шел дол­гим и не­про­стым. Ран­ние вер­сии шриф­та ди­зай­не­ры те­сти­ро­ва­ли в про­дук­тах, од­на­ко про­во­дить серьёз­ные экс­пе­ри­мен­ты с жи­вой ауди­то­ри­ей с не­хин­то­ван­ной или не­от­кер­нен­ной вер­си­ей шриф­та не­воз­мож­но, по­это­му мно­гие те­сти­ро­ва­ния ещё толь­ко пред­сто­ят. Тут как с ди­зай­ном про­дук­тов: на­сто­я­щий ди­зайн на­чи­на­ет­ся толь­ко по­сле за­пус­ка.

Од­ним из тре­бо­ва­ний к раз­ра­бот­чи­кам Yandex Sans бы­ло сле­до­ва­ние клю­че­вым па­ра­мет­рам — мет­ри­кам и про­пор­ци­ям — си­стем­но­го шриф­та Arial. Это мож­но по­нять с праг­ма­тич­еской точ­ки зре­ния: шрифт встаёт на своё ме­сто в ин­тер­фей­се, не раз­би­вая ма­ке­ты, но при этом даёт опре­делён­ные огра­ни­че­ния в ди­зайн-ре­ше­ни­ях. Как это ока­за­лось на прак­ти­ке? Ка­кую пер­вую обрат­ную связь вы по­лу­чи­ли?

Кон­стан­тин Гор­ский: Мы вы­ка­ты­ва­ли шрифт в те­сти­ро­ва­ние во вну­трен­нем бло­ге «Ян­дек­са», но этот экс­пе­ри­мент не сто­ит вос­при­ни­мать всерьёз. Я да­же не уве­рен, что сло­во «экс­пе­ри­мент» здесь при­ме­ни­мо. Те со­труд­ни­ки, ко­то­рые столк­ну­лись с но­вым шриф­том, ни­че­го не за­ме­ти­ли. И это здо­ро­во, это го­во­рит о том, что чте­нию и вос­при­я­тию ин­фор­ма­ции ни­че­го не по­ме­ша­ло. Од­ним из са­мых по­лез­ных след­ствий это­го те­сти­ро­ва­ния ста­ло то, что лю­ди уви­де­ли шрифт не толь­ко на экра­нах ди­зай­нер­ских мо­ни­то­ров, но и на са­мых раз­ных устрой­ствах, в раз­ных бра­у­зе­рах, на­при­мер, с вы­клю­чен­ным экран­ным сгла­жи­ва­ни­ем. Всё это да­ло цен­ную обрат­ную связь, ко­неч­но.

Илья Ру­дер­ман: До­ста­точ­но мно­го на­ших уси­лий бы­ло на­прав­ле­но на то, что­бы вос­при­я­тие и впе­чат­ле­ние от но­во­го шриф­та, ме­ста­ми за­ме­ня­ю­ще­го Arial, а ме­ста­ми TextBook, сде­лать мак­си­маль­но при­ят­ны­ми для поль­зо­ва­те­ля. Очень важ­ным фак­то­ром бы­ло со­от­вет­ствие Yandex Sans шриф­ту Arial по ём­ко­сти и про­пор­ци­ям. Оче­вид­но, что шрифт для экран­но­го чте­ния дол­жен быть с от­кры­той апер­ту­рой, но тот же Arial — за­кры­тый гро­теск. Не мо­гу ска­зать, что эти огра­ни­че­ния как-то силь­но по­вли­я­ли на ди­зайн Yandex Sans, ско­рее они ска­за­лись на ко­ли­че­стве те­стов и не­боль­ших уточ­не­ний вер­ти­каль­ных мет­рик и меж­бук­вен­ных рас­сто­я­ний.

Arial и Yandex Sans от­но­сят­ся к раз­ным шриф­то­вым груп­пам: Arial — не­огро­теск, Yandex Sans — гу­ма­ни­сти­че­ский гро­теск. Клю­че­вые раз­ли­чия меж­ду ни­ми за­клю­ча­ют­ся в про­пор­ци­о­ни­ро­ва­нии ши­рин про­пис­ных, кон­струк­ци­ях зна­ков и сте­пе­ни от­кры­то­сти апер­ту­ры. Ке­гель­ные пло­щад­ки этих двух шриф­тов в це­лом тож­де­ствен­ны, но в прин­ци­пи­аль­ных мо­мен­тах де­ла­ют­ся не­об­хо­ди­мые ис­клю­че­ния. По­сколь­ку ки­рил­ли­ца Arial не вы­дер­жи­ва­ет кри­ти­ки, до­ста­точ­но бег­ло­го срав­не­ния, ко­то­рое не­из­беж­но вы­зы­ва­ет ощу­ще­ние кон­траст­но­го ду­ша.

Ми­гель Рей­ес: Этот про­ект от­ли­ча­ет­ся от мно­гих на­ших ра­бот тем, что основ­ной но­си­тель — это экран. На про­тя­же­нии ве­ков шриф­то­вой ди­зайн был ча­стью пе­чат­но­го про­цес­са, и боль­шин­ство шриф­тов се­го­дня по-преж­не­му пред­на­зна­че­ны для пе­ча­ти. Yandex Sans из­на­чаль­но рас­смат­ри­вал­ся как экран­ный шрифт.

Кри­сти­ан Шварц: На­при­мер, мы сде­ла­ли мно­го га­зет­ных шриф­тов, где фор­ма зна­ков тре­бу­ет опре­делён­ных ма­ни­пу­ля­ций и хит­ро­стей, что­бы оста­вать­ся хо­ро­шо чи­та­е­мой, бу­ду­чи на­пе­ча­тан­ной на га­зет­ной бу­ма­ге на стан­ке с не­вы­со­ким ка­че­ством пе­ча­ти. И за по­след­ние пять лет ра­бо­ты над на­шей кол­лек­ци­ей веб-шриф­тов мы об­на­ру­жи­ли, что мно­гие из трю­ков при­ме­ни­мы и здесь. Од­на­ко су­ще­ствен­ное раз­ли­чие для нас ока­за­лось в са­мом те­сти­ро­ва­нии: бы­ло не­при­выч­но оце­ни­вать шрифт с экра­на, где он и был на­ри­со­ван, но мы до­воль­но бы­стро при­вык­ли к это­му. На ре­ти­не, ко­неч­но, всё вы­гля­дит ве­ли­ко­леп­но, но у про­дук­тов «Ян­дек­са» огром­ная ауди­то­рия, вклю­чая ба­бу­шек, ко­то­рые си­дят в Internet Explorer на Windows XP, по­это­му нам важ­но бы­ло убе­дить­ся, что шрифт хо­ро­шо ра­бо­та­ет и в до­воль­но экс­тре­маль­ной си­ту­а­ции. Для это­го при­шлось по­сто­ян­но хин­то­вать фай­лы в про­цес­се раз­ра­бот­ки, хо­тя обыч­но это де­ла­ет­ся в кон­це.

Срав­не­ние ха­рак­те­ров шриф­тов — де­ло не­бла­го­дар­ное, тем не ме­нее на­хо­дить и со­по­став­лять схо­жие ре­ше­ния или раз­ную ло­ги­ку в шриф­тах од­ной ка­те­го­рии бы­ва­ет по­лез­ным для вы­ра­бот­ки не­об­хо­ди­мых ти­по­гра­фи­че­ских ре­флек­сов. Срав­не­ние c нео­гу­ма­ни­сти­че­ски­ми гро­те­ска­ми Verdana и Frutiger вы­даёт раз­ный под­ход в ди­зайн-ре­ше­ни­ях этих шриф­тов. Меж­ду од­но­знач­но­стью и уве­рен­но­стью Verdana и де­ли­кат­но­стью Frutiger рас­по­ла­га­ет­ся уме­рен­ный Yandex Sans.

За по­след­ние не­сколь­ко лет мы уви­де­ли ряд при­ме­ров раз­ра­бот­ки и вне­дре­ния соб­ствен­ных шриф­тов ги­гант­ски­ми соф­твер­ны­ми ком­па­ни­я­ми, на­при­мер San Francisco, Roboto, Segoe. В про­цес­се ра­бо­ты вы на­вер­ня­ка их при­сталь­но изу­ча­ли. К ка­ким вы­во­дам вы при­шли?

Кон­стан­тин Гор­ский: Да, мы смот­ре­ли в сто­ро­ну кон­ку­рен­тов. Тут, прав­да, на­до по­ни­мать, что на­ша за­да­ча от­ли­ча­ет­ся от той, ра­ди ко­то­рой раз­ра­ба­ты­ва­лись все вы­ше­пе­ре­чис­лен­ные гар­ни­ту­ры. И у Apple, и у Google, и у Microsoft есть плат­фор­мы, опе­ра­ци­он­ные си­сте­мы. Шриф­ты им нуж­ны как часть ви­зу­аль­но­го язы­ка плат­форм: пред­по­ла­га­ет­ся, что поль­зо­вать­ся си­стем­ны­ми шриф­та­ми бу­дут в пер­вую оче­редь раз­ра­бот­чи­ки при­ло­же­ний. У нас си­ту­а­ция дру­гая, плат­фор­мы у нас нет, и нам шрифт ну­жен как раз для то­го, что­бы вну­три чу­жих плат­форм иметь соб­ствен­ный го­лос. Что­бы от­ли­чать­ся, нуж­но по­про­бо­вать по­чув­ство­вать ха­рак­тер каж­до­го из пред­ста­ви­те­лей. Roboto, на наш взгляд, до­воль­но стро­гий, тех­но­ло­гич­ный, пря­мой. В его пер­вой вер­сии этот ха­рак­тер был вы­ра­жен ещё бо­лее яр­ко, он был пря­мо «чертёж­ный». Нам хо­те­лось быть «гу­ма­ни­стич­нее», мяг­че, до­брее. Segoe очень ха­рак­тер­ный, но нас удив­ля­ют не­ко­то­рые осо­бен­но­сти его ки­рил­ли­цы, фор­ма не­ко­то­рых зна­ков. San Francisco на мо­мент, ко­гда мы на­чи­на­ли ра­бо­тать над шриф­том, ещё не су­ще­ство­ва­ло, он по­явил­ся, ко­гда мы бы­ли уже на фи­ниш­ной пря­мой. По­это­му мы срав­ни­ва­ли се­бя с Гель­ве­ти­кой и хо­те­ли вы­гля­деть бо­лее со­вре­мен­но. San Francisco, как мне ка­жет­ся, по­лу­чил­ся очень спо­кой­ным и ней­траль­ным шриф­том, та­кая «со­вре­мен­ная клас­си­ка». Мы ра­ды, что наш шрифт то­же вы­гля­дит со­вре­мен­ным и в до­ста­точ­ной сте­пе­ни от­ли­ча­ет­ся от всех кон­ку­рен­тов.

Срав­не­ние шриф­тов клю­че­вых иг­ро­ков IT. На по­лю­сах — не­огро­теск Helvetica и гу­ма­ни­сти­че­ский гро­теск Мэтью Кар­те­ра Verdana. Клю­че­вые осо­бен­но­сти ти­по­гра­фи­че­ской ин­то­на­ции за­ви­сят от вы­бо­ра шриф­то­вой ка­те­го­рии: шриф­ты Google и Apple ис­поль­зу­ют мо­дель не­огро­те­сков (за­кры­тость, ста­ти­ка), то­гда как Microsoft и Yandex при­дер­жи­ва­ют­ся в сво­их гар­ни­ту­рах гу­ма­ни­сти­че­ских тра­ди­ций (от­кры­тость, ди­на­ми­ка).

Ка­ко­во это — де­лать шрифт для огром­ной тех­но­ло­ги­че­ской ком­па­нии? Ка­кой опыт вы по­лу­чи­ли в хо­де про­ек­та?

Илья Ру­дер­ман: С од­ной сто­ро­ны, «Ян­декс» — не пер­вый боль­шой кли­ент в мо­ей жиз­ни. По­сле РИА «Но­во­сти» я во­об­ще не бо­юсь боль­ших за­каз­чи­ков. На­ша с Юрой Остро­менц­ким сту­дия Custom Fonts бук­валь­но па­рал­лель­но с этим про­ек­том за­ни­ма­лась раз­ра­бот­кой кор­по­ра­тив­но­го шриф­та для ком­па­нии Те­ле2. С дру­гой сто­ро­ны, «Ян­декс» — осо­бен­ная ком­па­ния с точ­ки зре­ния ди­зайн-про­цес­сов. На­ча­ло на­ше­го про­ек­та бы­ло свя­за­но с при­хо­дом в «Ян­декс» Ири­ны Во­ло­ши­ной на долж­ность арт-ди­рек­то­ра, ко­то­рая взя­ла под кры­ло сло­жив­ший­ся кол­лек­тив ди­зай­не­ров. При этом со­хра­ня­лась столь важ­ная для «Ян­дек­са» де­мо­кра­тия в при­ня­тии всех ре­ше­ний.

Раз­ра­бот­ку кор­по­ра­тив­но­го шриф­та мы на­ча­ли с то­го, что со­бра­ли ра­бо­чую груп­пу, в ко­то­рую во­шли пред­ста­ви­те­ли всех основ­ных про­дук­тов и ди­зайн-на­прав­ле­ний «Ян­дек­са». Эта ра­бо­чая груп­па сна­ча­ла уточ­ни­ла бриф, а по­том при­ни­ма­ла уча­стие во всех клю­че­вых ре­ше­ни­ях. Имен­но эти ди­зай­не­ры по­лу­ча­ли те­сто­вые фай­лы, про­бо­ва­ли шриф­ты в ра­бо­те и по­мо­га­ли уточ­нять фи­наль­ный ре­зуль­тат. Де­лать шрифт для огром­ной тех­но­ло­ги­че­ской ком­па­нии очень ин­те­рес­но, в про­цес­се ра­бо­ты ста­но­вят­ся вид­ны мно­гие скры­тые вну­трен­ние про­цес­сы. Но раз­мер ком­па­нии иг­ра­ет вто­ро­сте­пен­ную роль, важ­нее раз­но­об­ра­зие про­дук­тов и си­ту­а­ций, в ко­то­рых шрифт ока­жет­ся: мо­биль­ные ин­тер­фей­сы, кар­ты, про­мо­ма­те­ри­а­лы, оформ­ле­ние о­флайн-ме­ро­при­я­тий и т.д. Тре­бо­ва­лось обо всём по­за­бо­тить­ся и ни­че­го не упу­стить.

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

Вы упо­ми­на­ли, что во вре­мя раз­ра­бот­ки Yandex Sans ки­рил­ли­ца силь­но по­вли­я­ла на ла­ти­ни­цу. В чём это от­ра­зи­лось на прак­ти­ке?

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

Кри­сти­ан Шварц: Для «Ян­дек­са» бы­ло важ­но, что­бы шрифт «го­во­рил» с рус­ским ак­цен­том, что­бы фор­мы зна­ков бы­ли аб­со­лют­но аутен­тич­ны и при­выч­ны рус­ско­му поль­зо­ва­те­лю. Хо­ро­ший при­мер с бук­ва­ми К и к — мы ре­ши­ли от­ка­зать­ся в ла­ти­ни­це от тра­ди­ци­он­ной кон­струк­ции, как в Гель­ве­ти­ке, по­сколь­ку это вы­гля­дит чу­же­род­но для ки­рил­ли­цы, и оста­но­ви­лись на об­щей фор­ме для этих букв в обо­их ал­фа­ви­тах, не­смот­ря на то что для ла­ти­ни­цы она вы­гля­дит не­мно­го стран­но. Мы ра­ды со­труд­ни­че­ству с Ильёй, в этом про­ек­те мы опи­ра­лись на его опыт и зна­ние как ки­рил­ли­цы, так и рус­ской ви­зу­аль­ной куль­ту­ры в це­лом.

Илья Ру­дер­ман: Не­смот­ря на то что в осно­ве Yandex Sans ле­жит эс­киз ла­ти­ни­цы Ми­ге­ля Рей­е­са, с са­мой пер­вой пре­зен­та­ции в нём при­сут­ство­ва­ла ки­рил­ли­че­ская часть, по­то­му что за­каз­чик смот­рел преж­де все­го на об­раз ки­рил­ли­че­ско­го тек­ста. Идея ро­ди­лась в ла­ти­ни­це, но про­ве­ря­лась, ут­вер­жда­лась, уточ­ня­лась че­рез приз­му ки­рил­ли­цы. Ди­зай­не­ры, по-мо­е­му, да­же не осо­бо те­сти­ро­ва­ли ла­тин­скую часть. Если огля­нуть­ся на­зад, то это вы­гля­дит край­не не­обыч­но, но тут дей­стви­тель­но всё сло­жи­лось так, что ощу­ще­ние от ки­рил­ли­цы опре­де­ля­ло те из­ме­не­ния, ко­то­рые от­ра­зи­лись на ла­тин­ской ча­сти.

Раз­ра­бот­ка шриф­та за­ня­ла по­чти вдвое боль­ше вре­ме­ни, чем пред­по­ла­га­лось. С ка­ки­ми слож­но­стя­ми вы столк­ну­лись в про­цес­се?

Сер­гей Фё­до­ров: На­вер­ное, са­мая слож­ная за­да­ча — ре­шить, ка­кой об­раз дол­жен не­сти в се­бе но­вый шрифт. Мы ин­же­не­ры, гу­ма­ни­та­рии или во­об­ще ка­кие-то дру­гие но­вые лю­ди? По­ни­ма­е­те, это до­воль­но слож­но и не­при­выч­но для та­кой ком­па­нии ин­же­не­ров, как «Ян­декс», иметь что-то от­лич­ное от «си­стем­но­го». Но мы долж­ны и хо­тим ме­нять­ся. Так­же шрифт дол­жен со­от­вет­ство­вать тех­ни­че­ским тре­бо­ва­ни­ям, ко­то­рые предъ­яв­ля­ют на­ши про­дук­ты. Ко­гда мы опре­де­ли­лись со смыс­ла­ми и ин­то­на­ци­я­ми, на­ча­лась про­дол­жи­тель­ная по вре­ме­ни ра­бо­та с тех­ни­че­ски­ми огра­ни­че­ни­я­ми: ско­рость за­груз­ки, ка­че­ство отоб­ра­же­ния на экра­не, сов­па­де­ния раз­лич­ных мет­рик с си­стем­ны­ми шриф­та­ми. Здесь нам пред­сто­ит про­де­лать ещё мно­го ра­бо­ты, и это са­мое ин­те­рес­ное. Прак­ти­че­ски ни у ко­го в Рос­сии нет опы­та раз­ра­бот­ки шриф­та для та­ко­го ко­ли­че­ства про­дук­тов, ко­то­рым рас­по­ла­га­ет «Ян­декс».

Го­во­ря о си­стем­ном под­хо­де в этой об­ла­сти, мож­но вспо­мнить опы­т Google Material Design, в ко­то­ром ти­по­гра­фи­ка и шрифт Roboto пред­став­ле­ны как не­отъ­ем­ле­мая часть еди­но­го це­ло­го. Из че­го со­сто­ит ви­зу­аль­ный язык «Ян­дек­са», ка­кие у не­го осо­бен­но­сти и прин­ци­пы?

Сер­гей Фё­до­ров: Я не со­гла­шусь, что шрифт в том же под­хо­де «Гугла» пред­став­лен как не­отъ­ем­ле­мая часть еди­но­го це­ло­го. На­чать хо­тя бы с то­го, что у «Гугла» бо­лее трёх шриф­тов и боль­шая фраг­мен­ти­ро­ва­ная си­сте­ма. С од­ной сто­ро­ны, без шриф­та в си­сте­мах ни­ку­да, с дру­гой сто­ро­ны, вид­но, как труд­но опе­ри­ро­вать этим по­ня­ти­ем, ко­гда речь идет о прин­ци­пах. Ведь есть те чер­ты ви­зу­аль­но­го язы­ка, ко­то­рые ку­да за­мет­нее гла­зу че­ло­ве­ка. По­это­му все прин­ци­пы Material Design на­чи­на­ют­ся со­всем не со шриф­та.

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

«Ян­декс» все­гда уде­лял мно­го вни­ма­ния язы­ку и ин­то­на­ции об­ще­ния с поль­зо­ва­те­лем. По­это­му, го­во­ря про шрифт и его ис­поль­зо­ва­ние, нам важ­но иметь ха­рак­тер, но не ме­шать поль­зо­ва­те­лю по­лу­чать объ­ек­тив­ную ин­фор­ма­цию. Для нас в дан­ном слу­чае шрифт — го­раз­до бо­лее важ­ный ин­стру­мент ком­му­ни­ка­ции с поль­зо­ва­те­лем, чем для «Гугла», имен­но по­это­му мы так осто­рож­ны с его вне­дре­ни­ем.

По­ка на глав­ной стра­ни­це и в боль­шин­стве про­дук­тов «Ян­дек­са» мы ви­дим Arial. Ко­гда его сме­нит Yandex Sans? Сколь­ко вре­ме­ни вы за­кла­ды­ва­ет­е на вне­дре­ние шриф­та во все про­дук­ты и ком­му­ни­ка­ции?

Сер­гей Фё­до­ров: Глав­ная стра­ни­ца, как и по­ис­ко­вая вы­да­ча, очень чув­стви­тель­на к лю­бым из­ме­не­ни­ям, ко­то­рые, в свою оче­редь, силь­но вли­я­ют на на­ши мет­ри­ки — сле­до­ва­тель­но, удоб­ство поль­зо­ва­те­лей и день­ги ком­па­нии. По­это­му к ним мы от­но­сим­ся с осто­рож­но­стью, и вне­дре­ние тут бу­дет плав­ным, с боль­шим ко­ли­че­ством ите­ра­ций. Нам пред­сто­ит мно­го экс­пе­ри­мен­тов, и ско­рее все­го, сам шрифт бу­дет из­ме­нять­ся в про­цес­се. Мы по­сте­пен­но на­чи­на­ем вне­дрять Yandex Sans в сер­ви­сах и при­ло­же­ни­ях — там, где это мож­но сде­лать бы­стро и без­бо­лез­нен­но. В ком­му­ни­ка­ци­ях из­ме­не­ния бу­дут про­ис­хо­дить бы­стрее.

Вы пла­ни­ру­е­те раз­ви­вать про­ект — раз­ра­ба­ты­вать до­пол­ни­тель­ные сти­ли и на­чер­та­ния, про­ек­ти­ро­вать Yandex Serif, на­при­мер?

Сер­гей Фё­до­ров: Мы уже вне­сли не­сколь­ко важ­ных из­ме­не­ний в те­ку­щий шрифт, раз­ра­бо­та­ли и вне­дри­ли спе­ци­аль­но для «Ян­декс.Лон­че­ра» Yandex Sans Condensed — за­ужен­ную вер­сию на­ше­го шриф­та. В сле­ду­ю­щем го­ду мы пла­ни­ру­ем раз­ра­бот­ку и вне­дре­ние но­вых на­чер­та­ний. Раз­ра­бот­ка Yandex Serif пла­ни­ро­ва­лась на­ми из­на­чаль­но, но в се­ре­ди­не про­ек­та бы­ло при­ня­то ре­ше­ние сфо­ку­си­ро­вать­ся на шриф­те без за­се­чек.

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

Ка­кие тен­ден­ции, на ваш взгляд, сей­час про­сле­жи­ва­ют­ся в со­вре­мен­ной ти­по­гра­фи­ке ин­тер­фей­сов, ин­фор­ма­ци­он­ных и сер­вис­ных про­дук­тов?

Сер­гей Фё­до­ров: По мо­им на­блю­де­ни­ям, глав­ная тен­ден­ция по­след­них лет, если не го­во­рить про лю­бовь ди­зай­не­ров к тем или иным шриф­там, — это при­ход бу­маж­ной ти­по­гра­фи­ки в веб. Воз­мож­но­стей по­яв­ля­ет­ся боль­ше, ди­зай­не­ры ста­но­вят­ся сме­лее, и веб до­воль­но силь­но ме­ня­ет­ся. При­ят­но на­блю­дать, как в ди­джи­та­ле по­яв­ля­ет­ся боль­ше бу­маж­ной точ­но­сти, ак­ку­рат­но­сти и вни­ма­ния к ти­по­гра­фи­ке. Мы сле­дим за все­ми сер­ви­са­ми, ра­бо­та­ю­щи­ми с боль­шой ауди­то­ри­ей: Apple, Google, Facebook, Airbnb, Pinterest, Microsoft. Из на­ших ре­бят мы смот­рим за сту­ди­ей Charmer и Ди­мой Бар­ба­не­лем.

1. Ирина Волошина — директор по дизайну (2013–2015), «Яндекс»
2. Константин Горский — директор по дизайну (2015–2016), «Яндекс»
3. Сергей Фёдоров — директор по дизайну (2016—н.в.), «Яндекс»
4. Илья Рудерман — дизайнер шрифта, партнёр CSTM Fonts
5. Мигель Рейес (Miguel Reyes) — дизайнер шрифта, Commercial Type
6. Кристиан Шварц (Christian Schwartz) — дизайнер шрифта, партнёр Commercial Type

typejournal.ru

«Яндекс» разработал фирменный шрифт / Хабр

На конференции «Я.Субботник для дизайнеров» компания «Яндекс» представила собственный шрифт под названием Yandex Sans. Этот универсальный шрифт теперь будет использоваться в сервисах и приложениях «Яндекса». Насколько широко он будет использоваться, в компании пока не решили.

Причины разработки собственного шрифта «Яндекс» объяснил в презентации. Во-первых, у конкурентов тоже есть свои шрифты, поэтому хочется «иметь свой голос». Дизайнеры сказали, что им не хватает возможностей Arial и Textbook. Во-вторых, это экономия финансов: разумнее инвестировать в свой шрифт, чем платить за лицензии.

Основные принципы, которые учитывали при разработке нового шрифта.

Шрифт должен быть:

1. Имеющим своё лицо
2. Спокойным, нейтральным
3. Выражающим наши ценности
4. Сделанным сразу для кириллицы
5. Применимым во всех средах
6. Имеющим степени насыщенности
7. Совпадающим по метрикам с Ариалом

Так появился Yandex Sans.

Для разработки шрифта наняли одного из самых известных дизайнеров шрифтов в мире Кристиана Шварца (Christian Schwartz).

Вместе с ним работал один из самых известных российских специалистов в этой области — Илья Рудерман, он давно сотрудничает со Шварцем, делал системы шрифтов для «Афиши» и многих других изданий, преподаёт в Британской высшей школе дизайна.

Разработчики постарались исправить недостатки обычного Arial, который обладает плохой кириллицей и не всегда литеры имеют оптимальные очертания: «Многие из его пропорций, форм и деталей странны». К тому же, Arial «безнадёжен с точки зрения брендинга».

С другой стороны, Textbook неплох, но немного старомоден и не подходит для использования в интерфейсах.

После редизайна yandex.ru с новым шрифтом сразу заметна лучшая читаемость и более чистый вид страницы.

Старый дизайн

Новый дизайн

Одновременно разработали новые иконки.

В презентации Кристиан Шварц и Илья Рудерман рассказывают, как оптимизировали шрифт. Например, сделали менее агрессивные концы в Yandex Sans Round.

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

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

UPD. Сообщение в официальном блоге Яндекса

habr.com

Шрифт Яндекса — Yandex Sans

23 апреля 2016 на Я.Субботнике для дизайнеров мы анонсировали наш собственный шрифт Yandex Sans. Мы работали над ним два с половиной года и очень счастливы наконец поделиться результатом. В этом посте я расскажу о том, зачем мы всё это задумали, как происходила работа, что получилось в результате и что будет дальше. Пост написан по мотивам нашего рассказа на Субботнике.

Зачем вообще думать о шрифте?

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

Шрифт  —  это один из базовых «голосов» графического дизайна наравне с цветом, формой и т. д. Шрифт влияет на то, как воспринимается информация, им набранная. У Джона Маэды в его лекции на TED я подсмотрел очень наглядный способ это продемонстрировать. Это история о форме и содержании. Давайте возьмем некоторое содержание и попробуем, зафиксировав его, менять форму. Пусть нашим содержанием будет хорошо известный девиз Яндекса — «найдётся всё».

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

Так обычно и говорит Яндекс. Это наше сообщение, произнесенное нашим же голосом.

* * *

А что, если бы мы использовали для этого же содержания вот такой шрифт?

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

* * *

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

* * *

А если так?

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

* * *

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

* * *

А ведь можно и вот так:

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

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

А что и как сейчас говорит Яндекс?

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

Кстати, Влад Головач рассказал, что, по его мнению, по-русски правильно называть этот шрифт Ариэль, так как изначально он был назван созвучно с персонажем «Бури» Шекспира. Но я пока, с вашего позволения, продолжу писать «Ариал».

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

Почему именно Ариал? Дизайнерам должна быть хорошо известна его история. Ариал базируется на пропорциях и рисунке букв Гельветики, одного из самых знаменитых и даже культовых шрифтов XX века. Гельветика появилась в 1957 году под именем Neue Haas Grotesk. Если по какой-то причине вы пропустили фильм Helvetica, обязательно посмотрите хотя бы этот трейлер (а лучше фильм целиком, конечно):

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

Когда Microsoft в 80-х выбирали шрифт для своей операционной системы Windows, они по какой-то причине решили не платить за лицензию на Гельветику, а вместо этого попросили компанию Monotype сделать для них собственную версию этой гарнитуры. Так появился Ариал  —  «гельветика для бедных» по меткому выражению кого-то из наших шрифтовых дизайнеров. Не буду здесь углубляться в сравнение Ариала и Гельветики. Любой желающий без труда убедится, что они действительно очень близки:

Слайд Кристиана Шварца показывает наложение Ариала и Гельветики

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

• Пропорции и рисунок букв местами вызывают вопросы — особенно в кириллице, многие буквы которой выглядят откровенно странно.
• Нет вариаций насыщенности (то есть толщины линий букв). Только обычный и жирный (отдельно существует еще Arial Black). Для современных интерфейсов этого уже не хватает, нужны разные степени насыщенности, легкие тонкие начертания, полужирные и т. д.
• Плохая читаемость в мелких кеглях. Из-за закрытого рисунка букв в размерах ниже 12px символы начинают «слипаться» и читаемость страдает. В веб-интерфейсах Яндекса самые мелкие надписи мы набираем открытой Верданой, лишенной этого недостатка.

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

На Андроиде нашим «голосом» оказывается довольно холодно-технологично-инженерный шрифт Roboto, в iOS — максимально нейтральный San Francisco, в Windows — характерный Segoe, к кириллице которого есть много вопросов.

* * *

А как звучат рекламные коммуникации Яндекса? Подборка Тараса снова показывает характерное:

Это Textbook New, он же гарнитура Букварная, впервые разработанная в СССР в 1958 году Еленой Царегородцевой в НПО «Полиграфмаш» для набора — действительно — букварей и школьных учебников. Добрый шрифт, знакомый каждому, чьё детство проходило на советском (и немножко постсоветском) пространстве. Свой, родной. Но несколько странный для современной высокотехнологичной компании в XXI веке.

С этим набором шрифтов мы жили до текущего момента, однако давно ощущали его ограничения. Мы чувствовали, что нам:

• недостаточно выразительных и технических возможностей Ариала и Текстбука;
• хочется иметь свой голос в мире чужих платформ.

Всё это привело к размышлениям о том, каким должен быть шрифт Яндекса.

Каким должен быть шрифт Яндекса

Мы сформулировали требования к нашему шрифту:

1. Шрифт должен иметь своё лицо, отличаться от конкурентов

Конкуренты — это, в первую очередь, Roboto, San Francisco, Segoe — шрифты интерфейсов Google, Apple и Microsoft соответственно.

2. И в то же время быть спокойным, нейтральным, не слишком характерным

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

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

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

3. Выражающим наши ценности

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

• открытый,
• современный,
• умный,
• нейтральный,
• локальный,
• технологичный, но с человеческим лицом.

Мне особенно близок последний пункт. Хотя мы — современная высокотехнологичная компания, нашим продуктам всегда была свойственна теплота и человечность. Мы точно не бездушный робот-андроид.

4. Сделанным в первую очередь для кириллического набора

Как известно, большинство шрифтов сначала создаются для латиницы, и лишь позже им дорисовывают кириллическую версию. Иногда это получается сделать более удачно, иногда  — менее. Для нас сразу было очень важно, чтобы Яндекс говорил по-русски без акцента. Применительно к шрифту это означает, что кириллица должна создаваться одновременно с латиницей или даже раньше.
Ну и конечно шрифт должен иметь все необходимые нам символы и буквы, использующиеся в странах, где мы работаем: России, Украине, Беларуси, Казахстане, Турции и др., знак рубля и т. д.

5. Очень хорошо читаемым, разборчивым и применимым во всех современных средах

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

6. Совпадающим по основным метрикам и пропорциям с Ариалом

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

7. Имеющим несколько степеней насыщенности

То есть толщины линий:

Сейчас даже для веб-интерфейсов уже не хватает просто «жирного» и «нежирного», нужны градации.

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

Команда

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

Ира Волошина, которая начинала проект в Яндексе, обратилась к Илье Рудерману, который, в свою очередь, порекомендовал подключить Кристиана Шварца.

В итоге нам очень повезло работать над шрифтом с Ильёй и Кристианом с его студией Commercial Type.

* * *

Кристиан Шварц в мире шрифтового дизайна  — настоящая суперзвезда мирового уровня. Он сотрудничал с Font Bureau (у них вообще звездный состав, включая, например, Мэтью Картера, автора шрифтов Verdana и Georgia), работал с Эриком Шпикерманном. Среди его работ — шрифты для американского Esquire, Deutsche Bahn и огромная система начертаний для британской газеты The Guardian, получившая международные награды. Кристиан удостоен премии лондонского Design Museum и был включен журналом Wallpaper в список «40 наиболее влиятельных дизайнеров до 40 лет».

* * *

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

* * *

В команде с Кристианом и Ильёй в роли ведущего дизайнера работал Мигель Рейес, дизайнер нью-йоркского офиса Commercial Type, который как и Илья обучался дизайну шрифтов в Голландии.

Хинтингом и сборкой шрифтов занимался Марк Рекорд.

Нам очень повезло, что удалось собрать для проекта такую звездную команду.

Со стороны Яндекса над шрифтом работало на разных этапах много замечательных людей. Проект начинала Ирина Волошина. Более чем активно участвовали Тарас Шаров, которого я уже упоминал в этом посте, Данил kovchiy Ковчий и Сергей Фёдоров, Стас plkv Поляков, Иван Semus Семенов, Андрей karmatsky Кармацкий, Миша Мильников, Рома Искандаров, Андрей Лось, Настя Ларкина, Сережа 3apa3a Томилов, Никита Бровиков, Дима Середа, Саша Володин и очень-очень многие другие. Бесконечное количество раз бесконечное количество дизайнеров присылали правки, замечания и пожелания. Мне бы очень хотелось поблагодарить всех, и я очень боюсь кого-то забыть, поэтому не буду перечислять каждого.

Как работали над шрифтом

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

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

Flat — более контрастный и более острый, характерный:

Round — более дружелюбный и мягкий:

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

Шрифт, правда, всё равно выглядел довольно «колючим», поэтому в следующих версиях окончания штрихов смягчили:

<img src=«cdn-images-1.medium.com/max/800/1*XWqkkUy888GRSMI2NsgD_Q.png» alt=«image»/>

С самого начала у нас было в работе две версии шрифта: Text и Display:

Увидев слово Display, можно подумать, что эта версия предназначена для экранов, но это не так. В типографике Text используется для основного набора, мелких кеглей, а Display — для крупного, например, для заголовков. Можно увидеть, что буквы Display более характерные, вычурные.

В курсиве мы перебрали большое количество вариаций отдельных знаков. Долго не могли выбрать форму букв г, д, е, и, й, т, ц, ч, ш, щ, f. В конце концов после бесчисленных проб остановились на таком варианте:

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

Параллельно всё время происходило бесконечное количество технической работы, подбора кернинговых пар, хинтинга, работы над несколькими начертаниями:

Что получилось в результате

Финальная (на сегодняшний день) версия шрифта Yandex Sans выглядит так:


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

А вот как выглядит примерка шрифта в естественной среде:

Yandex Sans в макете результатов поиска. Автор — Даня Ковчий

Концепт интерфейса Яндекс.Музыки с новым шрифтом. Автор — Даня Ковчий

Концепт главной страницы Яндекса с новым шрифтом. Автор — Даня Ковчий

Прямо сейчас мы уже используем новый шрифт в интерфейсе нашего Лончера на Андроиде и на странице О компании:

Теперь миссию Яндекса и историю компании можно прочитать нашим «голосом» — нашим новым шрифтом.

А вот как выглядят примеры фраз из начала поста, набранные Yandex Sans:

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

Что дальше

Многие спрашивают, планируем ли мы выложить новый шрифт в открытый доступ. Сейчас мы этого не планируем. Yandex Sans — голос нашего бренда, такой же как логотип Яндекса. Поэтому и использоваться он будет только в наших продуктах и коммуникациях. Apple и Google раздают свои шрифты открыто для того, чтобы разработчики приложений под iOS и Android могли ими воспользоваться. У нас такой задачи прямо сейчас нет, поэтому и отдавать наружу шрифт не планируется.

Впереди у нас самое интересное. Как известно, с запуском продукта работа над ним только начинается. Нам еще только предстоит по-настоящему тестировать Yandex Sans в продуктах. И если в коммуникациях он совсем скоро начнет появляться, то на главной странице Яндекса или в результатах поиска Yandex Sans точно не стоит ждать в ближайшее время. Впрочем, начало положено, и это, как мне кажется, самое главное.

Автор: Яндекс

Источник

www.pvsm.ru

Шрифт Яндекса — Yandex Sans / СоХабр

23 апреля 2016 на Я.Субботнике для дизайнеров мы анонсировали наш собственный шрифт Yandex Sans. Мы работали над ним два с половиной года и очень счастливы наконец поделиться результатом. В этом посте я расскажу о том, зачем мы всё это задумали, как происходила работа, что получилось в результате и что будет дальше. Пост написан по мотивам нашего рассказа на Субботнике.

Зачем вообще думать о шрифте?

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

Шрифт  —  это один из базовых «голосов» графического дизайна наравне с цветом, формой и т. д. Шрифт влияет на то, как воспринимается информация, им набранная. У Джона Маэды в его лекции на TED я подсмотрел очень наглядный способ это продемонстрировать. Это история о форме и содержании. Давайте возьмем некоторое содержание и попробуем, зафиксировав его, менять форму. Пусть нашим содержанием будет хорошо известный девиз Яндекса — «найдётся всё».

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

Так обычно и говорит Яндекс. Это наше сообщение, произнесенное нашим же голосом.

* * *

А что, если бы мы использовали для этого же содержания вот такой шрифт?

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

* * *

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

* * *

А если так?

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

* * *

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

* * *

А ведь можно и вот так:

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

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

А что и как сейчас говорит Яндекс?

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

Кстати, Влад Головач рассказал, что, по его мнению, по-русски правильно называть этот шрифт Ариэль, так как изначально он был назван созвучно с персонажем «Бури» Шекспира. Но я пока, с вашего позволения, продолжу писать «Ариал».

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

Почему именно Ариал? Дизайнерам должна быть хорошо известна его история. Ариал базируется на пропорциях и рисунке букв Гельветики, одного из самых знаменитых и даже культовых шрифтов XX века. Гельветика появилась в 1957 году под именем Neue Haas Grotesk. Если по какой-то причине вы пропустили фильм Helvetica, обязательно посмотрите хотя бы этот трейлер (а лучше фильм целиком, конечно):

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

Когда Microsoft в 80-х выбирали шрифт для своей операционной системы Windows, они по какой-то причине решили не платить за лицензию на Гельветику, а вместо этого попросили компанию Monotype сделать для них собственную версию этой гарнитуры. Так появился Ариал  —  «гельветика для бедных» по меткому выражению кого-то из наших шрифтовых дизайнеров. Не буду здесь углубляться в сравнение Ариала и Гельветики. Любой желающий без труда убедится, что они действительно очень близки:

Слайд Кристиана Шварца показывает наложение Ариала и Гельветики

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

• Пропорции и рисунок букв местами вызывают вопросы — особенно в кириллице, многие буквы которой выглядят откровенно странно.
• Нет вариаций насыщенности (то есть толщины линий букв). Только обычный и жирный (отдельно существует еще Arial Black). Для современных интерфейсов этого уже не хватает, нужны разные степени насыщенности, легкие тонкие начертания, полужирные и т. д.
• Плохая читаемость в мелких кеглях. Из-за закрытого рисунка букв в размерах ниже 12px символы начинают «слипаться» и читаемость страдает. В веб-интерфейсах Яндекса самые мелкие надписи мы набираем открытой Верданой, лишенной этого недостатка.

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

На Андроиде нашим «голосом» оказывается довольно холодно-технологично-инженерный шрифт Roboto, в iOS — максимально нейтральный San Francisco, в Windows — характерный Segoe, к кириллице которого есть много вопросов.

* * *

А как звучат рекламные коммуникации Яндекса? Подборка Тараса снова показывает характерное:

Это Textbook New, он же гарнитура Букварная, впервые разработанная в СССР в 1958 году Еленой Царегородцевой в НПО «Полиграфмаш» для набора — действительно — букварей и школьных учебников. Добрый шрифт, знакомый каждому, чьё детство проходило на советском (и немножко постсоветском) пространстве. Свой, родной. Но несколько странный для современной высокотехнологичной компании в XXI веке.

С этим набором шрифтов мы жили до текущего момента, однако давно ощущали его ограничения. Мы чувствовали, что нам:

• недостаточно выразительных и технических возможностей Ариала и Текстбука;
• хочется иметь свой голос в мире чужих платформ.

Всё это привело к размышлениям о том, каким должен быть шрифт Яндекса.

Каким должен быть шрифт Яндекса

Мы сформулировали требования к нашему шрифту:

1. Шрифт должен иметь своё лицо, отличаться от конкурентов

Конкуренты — это, в первую очередь, Roboto, San Francisco, Segoe — шрифты интерфейсов Google, Apple и Microsoft соответственно.

2. И в то же время быть спокойным, нейтральным, не слишком характерным

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

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

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

3. Выражающим наши ценности

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

• открытый,
• современный,
• умный,
• нейтральный,
• локальный,
• технологичный, но с человеческим лицом.

Мне особенно близок последний пункт. Хотя мы — современная высокотехнологичная компания, нашим продуктам всегда была свойственна теплота и человечность. Мы точно не бездушный робот-андроид.

4. Сделанным в первую очередь для кириллического набора

Как известно, большинство шрифтов сначала создаются для латиницы, и лишь позже им дорисовывают кириллическую версию. Иногда это получается сделать более удачно, иногда  — менее. Для нас сразу было очень важно, чтобы Яндекс говорил по-русски без акцента. Применительно к шрифту это означает, что кириллица должна создаваться одновременно с латиницей или даже раньше.
Ну и конечно шрифт должен иметь все необходимые нам символы и буквы, использующиеся в странах, где мы работаем: России, Украине, Беларуси, Казахстане, Турции и др., знак рубля и т. д.

5. Очень хорошо читаемым, разборчивым и применимым во всех современных средах

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

6. Совпадающим по основным метрикам и пропорциям с Ариалом

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

7. Имеющим несколько степеней насыщенности

То есть толщины линий:

Сейчас даже для веб-интерфейсов уже не хватает просто «жирного» и «нежирного», нужны градации.

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

Команда

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

Ира Волошина, которая начинала проект в Яндексе, обратилась к Илье Рудерману, который, в свою очередь, порекомендовал подключить Кристиана Шварца.

В итоге нам очень повезло работать над шрифтом с Ильёй и Кристианом с его студией Commercial Type.

* * *

Кристиан Шварц в мире шрифтового дизайна  — настоящая суперзвезда мирового уровня. Он сотрудничал с Font Bureau (у них вообще звездный состав, включая, например, Мэтью Картера, автора шрифтов Verdana и Georgia), работал с Эриком Шпикерманном. Среди его работ — шрифты для американского Esquire, Deutsche Bahn и огромная система начертаний для британской газеты The Guardian, получившая международные награды. Кристиан удостоен премии лондонского Design Museum и был включен журналом Wallpaper в список «40 наиболее влиятельных дизайнеров до 40 лет».

* * *

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

* * *

В команде с Кристианом и Ильёй в роли ведущего дизайнера работал Мигель Рейес, дизайнер нью-йоркского офиса Commercial Type, который как и Илья обучался дизайну шрифтов в Голландии.

Хинтингом и сборкой шрифтов занимался Марк Рекорд.

Нам очень повезло, что удалось собрать для проекта такую звездную команду.

Со стороны Яндекса над шрифтом работало на разных этапах много замечательных людей. Проект начинала Ирина Волошина. Более чем активно участвовали Тарас Шаров, которого я уже упоминал в этом посте, Данил kovchiy Ковчий и Сергей Фёдоров, Стас plkv Поляков, Иван Semus Семенов, Андрей karmatsky Кармацкий, Миша Мильников, Рома Искандаров, Андрей Лось, Настя Ларкина, Сережа 3apa3a Томилов, Никита Бровиков, Дима Середа, Саша Володин и очень-очень многие другие. Бесконечное количество раз бесконечное количество дизайнеров присылали правки, замечания и пожелания. Мне бы очень хотелось поблагодарить всех, и я очень боюсь кого-то забыть, поэтому не буду перечислять каждого.

Как работали над шрифтом

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

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

Flat — более контрастный и более острый, характерный:

Round — более дружелюбный и мягкий:

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

Шрифт, правда, всё равно выглядел довольно «колючим», поэтому в следующих версиях окончания штрихов смягчили:

<img src=«cdn-images-1.medium.com/max/800/1*XWqkkUy888GRSMI2NsgD_Q.png» alt=«image»/>

С самого начала у нас было в работе две версии шрифта: Text и Display:

Увидев слово Display, можно подумать, что эта версия предназначена для экранов, но это не так. В типографике Text используется для основного набора, мелких кеглей, а Display — для крупного, например, для заголовков. Можно увидеть, что буквы Display более характерные, вычурные.

В курсиве мы перебрали большое количество вариаций отдельных знаков. Долго не могли выбрать форму букв г, д, е, и, й, т, ц, ч, ш, щ, f. В конце концов после бесчисленных проб остановились на таком варианте:

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

Параллельно всё время происходило бесконечное количество технической работы, подбора кернинговых пар, хинтинга, работы над несколькими начертаниями:

Что получилось в результате

Финальная (на сегодняшний день) версия шрифта Yandex Sans выглядит так:


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

А вот как выглядит примерка шрифта в естественной среде:

Yandex Sans в макете результатов поиска. Автор — Даня Ковчий

Концепт интерфейса Яндекс.Музыки с новым шрифтом. Автор — Даня Ковчий

Концепт главной страницы Яндекса с новым шрифтом. Автор — Даня Ковчий

Прямо сейчас мы уже используем новый шрифт в интерфейсе нашего Лончера на Андроиде и на странице О компании:

Теперь миссию Яндекса и историю компании можно прочитать нашим «голосом» — нашим новым шрифтом.

А вот как выглядят примеры фраз из начала поста, набранные Yandex Sans:

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

Что дальше

Многие спрашивают, планируем ли мы выложить новый шрифт в открытый доступ. Сейчас мы этого не планируем. Yandex Sans — голос нашего бренда, такой же как логотип Яндекса. Поэтому и использоваться он будет только в наших продуктах и коммуникациях. Apple и Google раздают свои шрифты открыто для того, чтобы разработчики приложений под iOS и Android могли ими воспользоваться. У нас такой задачи прямо сейчас нет, поэтому и отдавать наружу шрифт не планируется.

Впереди у нас самое интересное. Как известно, с запуском продукта работа над ним только начинается. Нам еще только предстоит по-настоящему тестировать Yandex Sans в продуктах. И если в коммуникациях он совсем скоро начнет появляться, то на главной странице Яндекса или в результатах поиска Yandex Sans точно не стоит ждать в ближайшее время. Впрочем, начало положено, и это, как мне кажется, самое главное.

sohabr.net

«Яндекс» создал фирменный шрифт

«Яндекс» создал фирменный шрифт Yandex Sans. До сих пор компания пользовалась гарнитурой Textbook, разработанной в НПО «Полиграфмаш» в 1958 году и предназначенной для набора букварей и учебников, а также Arial.

В презентации «Яндекс» ссылается на конкурентов, которые имеют собственные шрифты: Google, Apple и Microsoft. «Мы почувствовали, что нам хочется иметь свой голос; разумнее инвестировать в свой шрифт, чем платить за лицензии», — объяснили дизайнеры.

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

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

Главным недостатком Arial «Яндекс» называет плохое воплощение в кириллице и его безнадежность для брендинга, а Textbook «упрекнули» в старомодности и невозможности использовать в интерфейсе. Над созданием Yandex Sans трудилась команда из трех дизайнеров: Кристиан Шварц (Christian Schwartz), Мигель Рейес (Miguel Reyes) и Илья Рудерман.

Шварц — один из самых известных шрифтовых дизайнеров, который сотрудничал с Font Bureau и, в частности, работал над большой системой начертаний для The Guardian (знаменитой Guardian Egyptian). Рудерман преподает в Британской высшей школе дизайна, на его счету — система шрифтов для «Афиши» и других изданий. Рейес работает в компании Commercial Type, созданной Шварцем.

www.sostav.ru