Шрифт Яндекса — 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 точно не стоит ждать в ближайшее время. Впрочем, начало положено, и это, как мне кажется, самое главное.
Как создавался шрифт Яндекса: Yandex Sans
Константин Горский в своем блоге на Medium поделился историей разработки фирменного шрифта 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, который как и Илья обучался дизайну шрифтов в Голландии.
Хинтингом и сборкой шрифтов занимался Марк Рекорд.
Нам очень повезло, что удалось собрать для проекта такую звездную команду.
Со стороны Яндекса над шрифтом работало на разных этапах много замечательных людей. Проект начинала Ирина Волошина. Более чем активно участвовали Тарас Шаров, которого я уже упоминал в этом посте, Данил Ковчий и Сергей Фёдоров, Стас Поляков, Иван Семенов, Андрей Кармацкий, Миша Мильников, Рома Искандаров, cirrhoz, Настя Ларкина, Сережа Томилов, Никита Бровиков, Дима Середа, Саша Володин и очень-очень многие другие. Бесконечное количество раз бесконечное количество дизайнеров присылали правки, замечания и пожелания. Мне бы очень хотелось поблагодарить всех, и я очень боюсь кого-то забыть, поэтому не буду перечислять каждого.
Как работали над шрифтом
Расскажу здесь очень-очень кратко и только об основных вехах работы. За два с половиной года было много всякого, а пост, кажется, и так уже получается чересчур длинным. Илья и Кристиан в ближайшее время собираются написать свои посты, в которых наверняка будет больше деталей про процесс.
Изучив бриф и большое количество макетов наших интерфейсов и коммуникаций, дизайнеры предложили два направления с условными названиями Flat и Round.
Flat — более контрастный и более острый, характерный:
Round — более дружелюбный и мягкий:
После примерки в макеты интерфейсов и коммуникаций, а также после сравнительных тестов безоговорочным победителем оказался Round.
Шрифт, правда, всё равно выглядел довольно «колючим», поэтому в следующих версиях окончания штрихов смягчили:
С самого начала у нас было в работе две версии шрифта: Text и Display:
Увидев слово Display, можно подумать, что эта версия предназначена для экранов. Вовсе нет. В типографике Text используется для основного набора, мелких кеглей, а Display — для крупного, например, для заголовков. Можно увидеть, что буквы Display более характерные, вычурные.
В курсиве мы перебрали большое количество вариаций отдельных знаков. Долго не могли выбрать форму букв г, д, е, и, й, т, ц, ч, ш, щ, f. В конце концов после бесчисленных проб остановились на таком варианте:
Шрифт снова и снова тестировался, но все еще казался нам недостаточно мягким и добрым. Он, безусловно, выглядел современно, но ему не хватало теплоты и человечности, присущей, например, Букварной. Перепробовав большое количество вариаций пропорций и окончаний штрихов, мы получили более добрую версию, которая и была взята за основу:
Параллельно всё время происходило бесконечное количество технической работы, подбора кернинговых пар, хинтинга, работы над несколькими начертаниями:
Что получилось в результате
Финальная (на сегодняшний день) версия шрифта Yandex Sans выглядит так:
Мне кажется, нам удалось решить главную задачу — сделать современный нейтральный шрифт, отличающийся от основных конкурентов и довольно точно передающий образ Яндекса и «голос» нашего бренда.
А вот как выглядит примерка шрифта в естественной среде:
Yandex Sans в макете результатов поиска. Автор — Даня Ковчий
Концепт интерфейса Яндекс.Музыки с новым шрифтом. Автор — Даня Ковчий
Концепт главной страницы Яндекса с новым шрифтом. Автор — Даня Ковчий
Прямо сейчас мы уже используем новый шрифт в интерфейсе нашего Лончера на Андроиде и на странице «О компании»:
Теперь миссию Яндекса и историю компании можно прочитать нашим «голосом» — нашим новым шрифтом.
А вот как выглядят примеры фраз в начале поста, набранные Yandex Sans:
Здесь тоже видно, что шрифту удается быть достаточно узнаваемым и самобытным, оставаясь одновременно нейтральным и не добавляя дополнительного смысла тексту, не искажая исходный материал.
Что дальше
Впереди у нас самое интересное. Как известно, с запуском продукта работа над ним только начинается. Нам еще только предстоит по-настоящему тестировать Yandex Sans в продуктах. И если в коммуникациях он совсем скоро начнет появляться, то на главной странице Яндекса или в результатах поиска Yandex Sans точно не стоит ждать в ближайшее время. Впрочем, начало положено, и это, как мне кажется, самое главное.
Если вы нашли опечатку — выделите ее и нажмите Ctrl + Enter! Для связи с нами вы можете использовать info@apptractor. 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 и Димой Барбанелем.
- Ирина Волошина — директор по дизайну (20132015), «Яндекс»
- Константин Горский — директор по дизайну (20152016), «Яндекс»
- Сергей Фёдоров — директор по дизайну (2016—н.в.), «Яндекс»
- Илья Рудерман — дизайнер шрифта, партнёр CSTM Fonts
- Мигель Рейес (Miguel Reyes) — дизайнер шрифта, Commercial Type
- Кристиан Шварц (Christian Schwartz) — дизайнер шрифта, партнёр Commercial Type
Ирина Волошина занимала позицию дизайн-директора «Яндекса» с октября 2013 по июнь 2015.
Ирина Волошина занимала позицию дизайн-директора «Яндекса» с октября 2013 по июнь 2015.
бесплатных шрифтов Yandex Sans Text Bold
Лучший веб-сайт с бесплатными высококачественными шрифтами Yandex Sans Text Bold, с 23 бесплатными шрифтами Yandex Sans Text Bold для немедленной загрузки и ➔ 49 профессиональными шрифтами Yandex Sans Text Bold по лучшей цене в Интернете.
Комика Текст 2 StylesHideShowДобавить в избранноеСкачать
Альберт Текст Жирный HideShowДобавить в избранноеСкачать
АтлантидаТекстЖирный СкрытьПоказатьДобавить в избранноеСкачать
Малиновый текст 2 StylesHideShowДобавить в избранноеСкачать
Текст Халландейла 2 StylesHideShowДобавить в избранноеСкачать
SandyTextHmkBold HideShowДобавить в избранноеСкачать
Комика текст капс 2 StylesHideShowДобавить в избранноеСкачать
WBX_GrannyT, полужирный HideShowДобавить в избранноеСкачать
DB тайский текст полужирный HideShowДобавить в избранноеСкачать
DBX тайский текст жирный HideShowДобавить в избранноеСкачать
GE SS Текст полужирный HideShowДобавить в избранноеСкачать
Жирный без засечек 7 HideShowДобавить в избранноеСкачать
Без плаката 2 StylesHideShowДобавить в избранноеСкачать
СтатуэткаСимвол 3 стиляСкрытьПоказатьДобавить в избранноеСкачать
SansChiseled ExtraBold HideShowДобавить в избранноеСкачать
AveriaSans-Bold HideShowДобавить в избранноеСкачать
BabelSans — полужирный HideShowДобавить в избранноеСкачать
ГосмикSansBold HideShowДобавить в избранноеСкачать
Освобождение без жирного шрифта HideShowДобавить в избранноеСкачать
PT без жирного шрифта СкрытьПоказатьДобавить в избранноеСкачать
ТрадиционныйSans-Bold HideShowДобавить в избранноеСкачать
Перспектива без жирного шрифта HideShowДобавить в избранноеСкачать
Дроид без жирного шрифта HideShowДобавить в избранноеСкачать
- Yandex Sans Text Web Bold Regular 1. 1 2015 Бесплатные шрифты …
OnlineWebFonts.COM — самый популярный в Интернете веб-сайт для онлайн-загрузки шрифтов, предлагающий более 8 000 000 продуктов для настольных компьютеров и веб-шрифтов для предварительного просмотра и загрузки.
- Yandex Sans Text Bold Regular 1.1 2015 Скачать шрифты бесплатно …
OnlineWebFonts.COM — самый популярный в Интернете веб-сайт для онлайн-загрузки шрифтов, предлагающий более 8 000 000 продуктов для настольных компьютеров и веб-шрифтов для предварительного просмотра и загрузки.
- Yandex Sans Bold Шрифты — fontsup.com
На сайте fontsup.com мы нашли 0 шрифтов, соответствующих запросу yandex sans, выделенному полужирным шрифтом.
- Яндекс Шрифты Sans — Fontsup.com
На сайте fontsup.com мы нашли 0 шрифтов, соответствующих запросу yandex sans font. Используйте все функции, которые мы создали для вас. Найдите свой стиль с Fontsup.com.
- Скачать шрифт Yandex Sans для Web или Photoshop. Шрифт
Яндекс Санс. Поддержка кириллицы: Да; Поддержка латиницы: Да; Начертания: Тонкое отображение, Светлое отображение, Обычное отображение, Курсивное отображение, Полужирное отображение, Тонкий текст, Светлый текст, Обычный текст, Курсив, Средний текст, Жирный текст. Категория: Шрифты без засечек, Фирменные, корпоративные шрифты. 15.11.2017; 3 775; 0; Добавить в избранное + +1- Yandex Sans Display Thin. TTF EOT WOFF ВЕБ. Яндекс без подсветки дисплея. ТТФ…
- Бесплатные шрифты MTN Brighter Sans Bold
Семейство шрифтов Source Sans Pro · 1001 шрифт. Загрузите семейство шрифтов Source Sans Pro · Бесплатно для коммерческого использования · Включает Source Sans Pro Regular, Extralight, Light, Semibold, Bold, Black, Italic, Extralight-italic, Light-italic, Semibold-italic, Bold-italic, Black-italic · Source® Sans Pro, первое семейство шрифтов Adobe с открытым исходным кодом, было разработано Полом Д. Хантом.
- Yandex Sans Ancient Bold Шрифты — fontsup.com
На сайте fontsup.com мы нашли 0 шрифтов, соответствующих запросу yandex sans font из категории древний жирный шрифт.
- Яндекс Санс: скачать бесплатно и установить на свой…
Скачать Яндекс Санс. Шрифт доступен во всех форматах (Yandex Sans woff2, Yandex Sans woff, Yandex Sans ttf, Yandex Sans eot) и применим к сайту, фотошопу и любой ОС. Шрифт доступен во всех форматах (Yandex Sans woff2, Yandex Sans woff, Yandex Sans ttf, Yandex Sans eot) и применим к сайту, фотошопу и любой ОС.
- Yandex Sans Cyrillic Italic Шрифты — fontsup.com
На сайте fontsup.com мы нашли 0 шрифтов, соответствующих запросу yandex sans font из категории кириллица в начертании курсивом.
Обратите внимание: если вы хотите создать профессиональную распечатку, вам следует рассмотреть коммерческий шрифт. Бесплатные шрифты часто содержат не все символы и знаки и не имеют пар кернинга (Avenue ↔ A venue, Tea ↔ T ea).
Проверьте это бесплатно с Typograph.
Родственные и подобные шрифты
Скрыть Показывать Добавить в любимое Скачать
Начать с 52,99 $
Скрыть Показывать Добавить в любимое Скачать
Начать с 32,99 $
Скрыть Показывать Добавить в любимое Скачать
Начать с 31,99 $
Скрыть Показывать Добавить в любимое Скачать
Начать с 58,99 $
Скрыть Показывать Добавить в любимое Скачать
Начать с 45,99 $
Скрыть Показывать Добавить в любимое Скачать
Начать с 191,99 $
Скрыть Показывать Добавить в любимое Скачать
Начать с 218,9 $9
Скрыть Показывать Добавить в любимое Скачать
Начать с 33,99 $
Скрыть Показывать Добавить в любимое Скачать
Начать с 33,99 $
Скрыть Показывать Добавить в любимое Скачать
Начать с 33,99 $
Скрыть Показывать Добавить в любимое Скачать
Начать с 15,99 $
Скрыть Показывать Добавить в любимое Скачать
Начать с 15,99 $
Скрыть Показывать Добавить в любимое Скачать
Начать с 78,99 $
Скрыть Показывать Добавить в любимое Скачать
Начать с 52,99 $
Скрыть Показывать Добавить в любимое Скачать
Начать с 28,99 $
Скрыть Показывать Добавить в любимое Скачать
Начать с 28,99 $
Скрыть Показывать Добавить в любимое Скачать
Начать с 28,99 $
Скрыть Показывать Добавить в любимое Скачать
Начать с 86,00 $
Скрыть Показывать Добавить в любимое Скачать
Начать с 58,99 $
Скрыть Показывать Добавить в любимое Скачать
Начать с 64,99 $
Скрыть Показывать Добавить в любимое Скачать
Начать с 24,99 $
Скрыть Показывать Добавить в любимое Скачать
Начать с 65,00 $
Скрыть Показывать Добавить в любимое Скачать
Начать с 12,99 $
Скрыть Показывать Добавить в любимое Скачать
Начать с 64,99 $
Скрыть Показывать Добавить в любимое Скачать
Начать с 32,99 $
Скрыть Показывать Добавить в любимое Скачать
Начать с 45,99 $
Скрыть Показывать Добавить в любимое Скачать
Начать с 45,99 $
Скрыть Показывать Добавить в любимое Скачать
Начать с 49,00 $
Скрыть Показывать Добавить в любимое Скачать
Начать с 32,99 $
Скрыть Показывать Добавить в любимое Скачать
Начать с 39,99 $
Скрыть Показывать Добавить в любимое Скачать
Начать с 37,99 $
Скрыть Показывать Добавить в любимое Скачать
Начать с 32,99 $
Скрыть Показывать Добавить в любимое Скачать
Начать с 32,99 $
Скрыть Показывать Добавить в любимое Скачать
Начать с 65,99 $
Скрыть Показывать Добавить в любимое Скачать
Начать с 29,99 $
Скрыть Показывать Добавить в любимое Скачать
Начать с 24,99 $
Скрыть Показывать Добавить в любимое Скачать
Начать с 19,99 $
Скрыть Показывать Добавить в любимое Скачать
Начать с 58,99 $
Скрыть Показывать Добавить в любимое Скачать
Начать с 65,99 $
Скрыть Показывать Добавить в любимое Скачать
Начать с 24,99 $
Скрыть Показывать Добавить в любимое Скачать
Начать с 39,99 $
Скрыть Показывать Добавить в любимое Скачать
Начать с 45,99 $
Скрыть Показывать Добавить в любимое Скачать
Начать с 58,99 $
Скрыть Показывать Добавить в любимое Скачать
Начать с 78,99 $
Скрыть Показывать Добавить в любимое Скачать
Начать с 25,99 $
Скрыть Показывать Добавить в любимое Скачать
Начать с 25,99 $
Скрыть Показывать Добавить в любимое Скачать
Начать с 52,99 $
Скрыть Показывать Добавить в любимое Скачать
Начать с 104,99 $
Скрыть Показывать Добавить в любимое Скачать
Начать с 65,99 $
Откройте для себя огромную коллекцию шрифтов и проверенных вручную графических ресурсов. Все необходимые вам шрифты и многие другие элементы дизайна доступны для ежемесячной подписки на Envato Elements. Подписка стоит 16,50 долларов в месяц и дает вам неограниченный доступ к огромной и постоянно растущей 1 500 000+ элементов, которые можно загружать так часто, как вам нужно (включая стоковые фотографии)!
Яндекс Шрифт — Яндекс Санс / Блог Яндекса / Хабр Мы работали над ним два с половиной года и очень рады наконец-то поделиться результатом. В этом посте я расскажу о том, почему мы все до этого додумались, как шла работа, что получилось в результате и что будет дальше. Пост был написан на основе нашей субботней истории.
Зачем вообще думать о шрифте?
Сразу приношу свои извинения дизайнерам, прочитавшим этот пост, потому что местами буду говорить об очевидных для нас вещах. Среди читателей много недизайнеров, поэтому начну издалека.
Шрифт является одним из основных «голосов» графического дизайна наряду с цветом, формой и т. д. Шрифт влияет на восприятие набираемой информации. В Джоне Маеде, в его лекции на TED, я подсмотрел очень очевидный способ продемонстрировать это. Это история о форме и содержании. Возьмем наполнение и попробуйте, исправив его, изменить на форму . Пусть нашим контентом станет известный девиз Яндекса — «есть все».
Вот как это выглядит, если набрать Alphabet Headset — шрифт, который мы используем для связи:
Так обычно говорит Яндекс. Это наше послание, произнесенное нашим собственным голосом.
* * *
А что, если бы мы использовали такой шрифт для того же контента?
Согласитесь, выглядит неубедительно. С трудом читается. Слишком дизайнер. Есть дизайнеры, хипстеры и смузи. Но не совсем.
* * *
Это серьезное заявление. Это может подойти для продажи в Auchan или From Hand to Hand. Лети, покупай!
* * *
А если да?
Это уже какое-то луркоморье, а может даже дно интернета. Есть все приколы, бесплатно, без смс.
* * *
Этот вариант больше похож на приглашение на свадьбу. Или, может быть, в меню в дорогом ресторане. Есть все устрицы, трюфели и шампанское.
* * *
Но можно сделать так:
Думаю, это что-то вроде заправки с магазином. Есть все: стирка, ключи с домкратами, и можно недорого перекусить.
Получается, что одно и то же содержание, заключенное в разной форме, может нести совершенно разный смысл. Именно поэтому задача выбора правильного шрифта очень важна. Шрифт должен правильно подчеркивать содержимое, помогать ему раскрываться без искажений.
А что сейчас яндекс говорит?
Тарас Шаров, руководитель группы прототипирования новых продуктов и один из авторов программы нашей Школы дизайна, писал фразы, которые как-то зацепили его в наших продуктах и коммуникациях. Результатом стал очень четкий выбор нашего языка, нашего стиля и нашего голоса. Вот, например, типичные для нашего интерфейса фразы, набранные Arial:
Кстати, Влад Головач сказал, что, по его мнению, правильно называть этот шрифт Ariel по-русски, так как он изначально назван в честь персонажа шекспировской «Бури». Но пока, с вашего позволения, я продолжу писать Arial.
В общем, Arial должен быть знаком читателю. И да, именно этот шрифт мы сегодня используем в наших веб-интерфейсах:
Почему Arial? Дизайнеры должны хорошо знать его историю. Ариал основан на пропорциях и рисунке букв Helvetica, одного из самых известных и даже культовых шрифтов 20-го века. Helvetica появилась в 1957 году под названием Neue Haas Grotesk. Если вы по каким-то причинам пропустили фильм Helvetica, обязательно посмотрите хотя бы этот трейлер (а лучше весь фильм, конечно):
Это гарнитура, которую можно увидеть практически в любой момент практически в любой точке мира. Он основан на визуальном языке бесчисленных брендов. Одним словом, живая классика.
Когда Microsoft в 80-х выбирала шрифт для своей операционной системы Windows, они почему-то решили не платить за лицензию на Helvetica, а вместо этого попросили Monotype сделать для них собственную версию этой гарнитуры. Так появился Arial — «Гельветика для бедных», как метко выразился один из наших шрифтовиков. Я не буду углубляться в сравнение между Arial и Helvetica. Любой может легко убедиться, что они действительно очень близки :
На слайде Кристиана Шварца показано наложение Arial и Helvetica
Неоспоримыми преимуществами Arial являются область его распространения — он предустановлен практически на каждом компьютере — и огромный набор символов, содержащих буквы всех мыслимых алфавитов и вообще почти все, что только можно придумать: например, знак рубля. В остальном у дизайнеров всегда было много вопросов к Arial:
- Пропорции и рисунок букв местами вызывают вопросы — особенно в кириллице, многие буквы которой выглядят откровенно странно.
- Различий в насыщенности (т.е. толщине линий букв) нет. Только обычный и полужирный (Arial Black до сих пор существует отдельно). Для современных интерфейсов этого уже мало, нужны разные степени насыщенности, легкие тонкие стили, полужирный шрифт и т.д.
- Плохая читаемость в мелких пинах. Из-за закрытой отрисовки букв размером менее 12px символы начинают «слипаться» и страдает читабельность. В веб-интерфейсах Яндекса набираем мельчайшие надписи с открытым Verdana, лишенным этого недостатка.
Помимо веб-интерфейсов существуют мобильные интерфейсы. Приложения Яндекса работают на разных платформах, а значит, мы наследуем визуальный язык платформы в плане шрифта:
на Android нашим «голосом» оказывается довольно холодно-техно-инженерный шрифт Roboto, на iOS — самый нейтральный сан-францис, в винде — характерный сего, в кириллице к которому много вопросов.
* * *
А как звучат рекламные сообщения Яндекса? Подборка Тараса снова показывает характеристику:
Это Учебник Новинка, она же «Букварная» гарнитура, впервые разработанная в СССР в 1958 году Еленой Царегородцевой в НПО «Полиграфмаш» для набора — собственно — букварей и школьных учебников. Хороший шрифт, знакомый всем, чье детство прошло на советском (и немного постсоветском) пространстве. Собственный, дорогой. Но несколько странно для современной высокотехнологичной компании 21 века.
Мы жили с этим набором шрифтов до настоящего момента, но давно ощутили его ограничения. Мы чувствовали, что мы:
- недостаточно выразительные и технические возможности Arial и Textbook;
- Я хочу иметь свой голос в мире платформ других людей.
Все это привело к размышлению о том, каким должен быть шрифт Яндекса.
Какой должен быть шрифт Яндекса
Сформулировали требования к нашему шрифту:
1. Шрифт должен иметь свое начертание, отличаться от конкурентов
Конкурентами являются, в первую очередь, Roboto, San Francisco, Segoe — шрифты интерфейсов Google, Apple и Microsoft соответственно.
2. И при этом быть спокойным, нейтральным, не слишком характерным
О нейтральности расскажу подробнее. Помимо упомянутых выше интерфейсных и коммуникационных текстов, основное использование шрифта в продуктах Яндекса — это передача информации, новостей, данных. Вот яркие примеры текстов из этой категории:
Одной из самых главных наших ценностей всегда было отсутствие редакционной политики. Новости выбираются алгоритмами, без вмешательства человека. Мы зеркало интернета, мы отражаем происходящее без добавления собственной оценки, позиции и каких-либо искажений. С этой точки зрения очень важно, чтобы шрифт тоже не добавлял никаких дополнительных смыслов, он предельно нейтрален.
Любопытно, что это требование в некотором смысле противоречит предыдущему. Нам нужно было найти баланс между максимальной выразительностью и максимальной нейтральностью.
3. Выражение наших ценностей
Нейтральность нейтральна, но у шрифта все же должно быть какое-то лицо. Если мы попытаемся описать, какие эмоции можно вложить в шрифт, то обычно формулируем примерно такой список:
- открытый,
- современный,
- умный,
- нейтральный,
- местный,
- технологический, но с человеческим лицом.
Последний пункт мне особенно близок. Несмотря на то, что мы современная высокотехнологичная компания, наша продукция всегда отличалась теплотой и человечностью. Мы определенно не бездушный робот-андроид.
4. Сделано в основном для кириллического набора
Как известно, большинство шрифтов сначала создаются под латиницу, а уже потом доделывают под кириллицу. Иногда это получается сделать более удачно, иногда менее. Для нас было сразу важно, чтобы Яндекс говорил по-русски без акцента. Применительно к шрифту это означает, что кириллица должна быть создана одновременно с латиницей или даже раньше.
Ну и конечно в шрифте должны быть все необходимые символы и буквы используемые в странах где мы работаем: Россия, Украина, Беларусь, Казахстан, Турция и т.д., знак рубля и т.д.
5. Очень читабельно, разборчиво и применимы во всех современных условиях.
Интерфейсы и коммуникации Яндекса встречаются в самых разных средах. Вот, например, некоторые среды, в которых типографика встречается в Яндекс.Такси (это далеко не полная подборка):
6. Совпадает по основным параметрам и пропорциям с Arial
Это техническое требование, важное для веб-интерфейсов. При замене шрифта с Arial на наш верстка страницы не должна разойтись. Также важно, чтобы шрифт не проигрывал Arial по ёмкости (то есть количеству знаков в строке средней ширины), чтобы информация в текстовом блоке заданного размера (например, в результатов поиска) подходит не меньше.
7. Имеющие несколько степеней насыщения
То есть толщина линий:
Теперь даже для веб-интерфейсов уже нет просто «жирный» и «нежирный», нужны градации.
Можно поискать готовый шрифт, который бы удовлетворял всем этим требованиям. Но тогда голос нашего бренда не был бы уникальным. И нам пришлось бы много платить за лицензии, учитывая размер аудитории наших продуктов и спектр приложений. Мы решили заказать собственный шрифт.
Команда
Нам нужен был дизайнер шрифтов с опытом работы с большими системами рисования. Он должен был быть русскоязычным или тесно сотрудничать с русскоязычным дизайнером.
Ира Волошина, которая запускала проект на Яндексе, обратилась к Илье Рудерману, который, в свою очередь, порекомендовал подключить Кристиана Шварца.
В итоге нам очень повезло работать над шрифтом с Ильей и Кристианом с его студией Commercial Type.
* * *
Кристиан Шварц в мире шрифтового дизайна — настоящая суперзвезда мирового уровня. Сотрудничал с Font Bureau (у них вообще звездный состав, включая, например, Мэтью Картера, шрифтовика Verdana и Georgia), работал с Эриком Шпикерманном. Среди его работ — шрифты для американского Esquire, Deutsche Bahn и огромная система стилей для британской газеты The Guardian, получившая международные награды. Кристиан был награжден премией Лондонского музея дизайна, а журнал Wallpaper включил его в список «40 самых влиятельных дизайнеров моложе 40».
* * *
Илья Рудерман — один из самых известных российских дизайнеров шрифтов, преподаватель Британской высшей школы дизайна. Илья изучал дизайн шрифтов в Королевской академии художеств в Гааге, позже у него учились многие российские дизайнеры шрифтов. Он работал над системами рисования для плакатов и многих других заказчиков. Что очень важно, Илья давно сотрудничает со Шварцем, вместе они сделали не один шрифт.
* * *
В команде с Кристианом и Ильей ведущим дизайнером работал Мигель Рейес, дизайнер нью-йоркского офиса Commercial Type, который, как и Илья, изучал шрифтовой дизайн в Нидерландах.
Подсказка и сборка шрифта с участием Mark Record .
Нам очень повезло, что нам удалось собрать такую звездную команду для проекта.
Со стороны Яндекса над шрифтом на разных этапах работало много замечательных людей. Проект начал Ирина Волошина. Более чем активно участвовали Тарас Шаров, которого я уже упоминал в этом посте, Данил ковчий Ковчий и Сергей Федоров, Стас плкв Поляков, Иван Семус Семенов, Андрей кармацкий Кармацкий, Миша Мильников, Рома Искандаров, Андрей Лось, Настя Ларкина, Сережа 3apa3aТомилов, Никита Бровиков, Дима Середа, Саша Володин и очень-очень многие другие. Бесконечное количество раз бесконечное количество дизайнеров присылали правки, комментарии и предложения. Очень хотелось бы всех поблагодарить, а то я очень боюсь кого-то забыть, поэтому всех перечислять не буду.
Как они работали над шрифтом
Расскажу здесь очень-очень кратко и только об основных вехах работы. За два с половиной года было много чего, и пост, кажется, уже затянулся. Илья и Кристиан в ближайшее время собираются написать свои посты, в которых наверняка будет больше подробностей о процессе.
Изучив бриф и большое количество макетов наших интерфейсов и коммуникаций, дизайнеры предложили два направления с условными названиями Flat и Round.
Плоский — более контрастный и резкий, характерный:
Круглый — более дружелюбный и мягкий:
После примерки макетов интерфейсов и коммуникаций, а также после сравнительных тестов Круглый стал безоговорочным победителем.
Шрифт, правда, по-прежнему выглядел довольно «царапающим», поэтому в следующих версиях последние штрихи были смягчены: «изображение»/>
С самого начала у нас было в работе две версии шрифта: Text и Display:
Увидев слово Display, можно подумать, что это версия для экранов, но это не так. В типографике Text используется для основного набора, маленьких пинов, а Display — для крупных, например, для заголовков. Вы можете видеть, что буквы Display более характерны, вычурны.
Курсивом мы прошли большое количество вариаций отдельных символов. Долго не могли выбрать форму букв р, д, е, щ, д, т, ц, з, ш, щ, ф . В итоге после бесчисленных проб мы остановились на таком варианте:
Шрифт тестировался снова и снова, но все равно казался нам недостаточно мягким и добрым. Он, конечно, выглядел современно, но ему не хватало теплоты и человечности, присущих, например, Прикварной. Перепробовав большое количество вариаций пропорций и окончаний штрихов, мы получили более добрый вариант, который был взят за основу:
Параллельно все время шел бесконечный объем технической работы, подбор кернинга пары, хинтинг, работа по нескольким стилям:
Что получилось в результате
Окончательный (на сегодняшний день) вариант шрифта Yandex Sans выглядит так:
Думаю, нам удалось решить главную задачу — сделать современный нейтральный шрифт, отличающийся от основных конкурентов и достаточно точно передающий образ Яндекса и «голос» нашего бренда.
А вот и шрифт, вписывающийся в естественную среду:
Яндекс Санс в верстке результатов поиска. Автор — Даня Ковчий
Концепция интерфейса Яндекс.Музыки с новым шрифтом. Автор — Даня Ковчий
Концепт главной страницы Яндекса с новым шрифтом. Автор — Даня Ковчий
Прямо сейчас мы уже используем новый шрифт в интерфейсе нашего Лаунчера на Android и на странице О программе:
Теперь миссия Яндекса и история компанию можно прочитать нашим «голосом» — нашим новым шрифтом.
А вот как выглядят примеры фраз из начала поста, набранного Яндекс Сансом:
Здесь также видно, что шрифту удается быть вполне узнаваемым и своеобразным, оставаясь при этом нейтральным и не добавляя тексту дополнительного смысла, не искажая исходный материал.
Что дальше
Многие спрашивают, не планируем ли мы сделать новый шрифт общедоступным. Сейчас мы этого не планируем. Яндекс Санс — это голос нашего бренда, такой же, как и логотип Яндекса. Поэтому он будет использоваться только в наших продуктах и сообщениях. Apple и Google открыто распространяют свои шрифты, чтобы разработчики приложений для iOS и Android могли их использовать. Такой задачи у нас сейчас нет, поэтому шрифт выдавать не планируется.
Самое интересное впереди. Как известно, с запуском продукта работа над ним только начинается. Нам еще предстоит по-настоящему протестировать Яндекс Санс в продуктах. И если он очень скоро начнет появляться в коммуникациях, то ждать в ближайшее время на главной странице Яндекса или в результатах поиска Яндекс Санс точно не стоит. Однако начало положено, и это, мне кажется, самое главное.
ImTranslator для Яндекса | ImTranslator
ImTranslator выполняет мгновенный перевод текстов, слов, фраз и веб-страниц между более чем 90 языками, используя 3 провайдера перевода (Google, Microsoft Bing, Translator), и читает текст на многих языках. ImTranslator доступен в Яндекс.Браузере через браузерные расширения Opera и полностью совместим с браузером Яндекс.
ImTranslator
Расширение для Яндекса
Новая версия
Добавить в Яндекс
ImTranslator для Яндекса включает следующие приложения для перевода:
- ImTranslator
- Всплывающий пузырьковый переводчик
- Встроенный переводчик
- Перевод веб-страниц
, а также удобные языковые инструменты, такие как преобразование текста в речь, история переводов и словарь ImTranslator.
Функциональность
- веб-перевод между 91 языком
- 10 тысяч символов на перевод
- 3 поставщика услуг перевода (Google, Microsoft Bing, Translator)
- 4 приложения для перевода
- перевод во всплывающем окне (Pop-up Bubble Translator)
- отдельное окно перевода с режимами Translator и Dictionary (ImTranslator)
- перевод, встроенный в веб-страницу (Inline Translator)
- перевод вся веб-страница с возможностью перевода при наведении курсора мыши (перевод веб-страницы)
- словарь
- преобразование текста в речь на 30 языках
- история переводов
- автоматическое определение языка
- обратный перевод
- настройка ярлыков
- полная настройка каждого инструмента перевода
- пользовательский интерфейс на английском, китайском, чешском, голландском, филиппинском, французском, немецком, греческом, итальянском, хинди, корейском, польском, португальском, румынском, русском , сербский, испанский, шведский, турецкий, вьетнамский, украинский языки.
ImTranslator – это отдельное приложение, которое переводит слова, предложения и тексты между более чем 90 языков с использованием 3 провайдеров перевода: Google, Microsoft Bing, Translator.
Чтобы запустить приложение, выполните следующие действия:
- нажмите кнопку «ImTranslator: Переводчик, Словарь, TTS» на панели инструментов Яндекса
- или выберите «ImTranslator» в контекстном меню Яндекса «ImTranslator: Переводчик, Словарь, TTS»
- или используйте сочетания клавиш Ctrl+Alt+V (по умолчанию).
Для перевода: введите, вставьте или перетащите текст в окно «Исходный текст». Выберите направление перевода и поставщика перевода и нажмите «Перевести».
Если вы не знаете исходный язык текста, выберите «Определить язык», чтобы позволить ImTranslator определить язык. Когда выполняется автоматическое определение языка, появится обнаруженный язык.
Вы можете переключаться между режимами переводчика и словаря, нажимая на соответствующие вкладки. Или просто введите одно слово для перевода. Вы будете немедленно перенаправлены в Словарь.
Это полезное расширение переводит слова, фразы и текст, определяет исходный язык на лету, обеспечивает обратный перевод, который возвращает перевод обратно на исходные языки, читает исходный текст и его перевод на 10 языков, переводит слова с помощью Словарь Google, настраивает параметры переводчика.
Переводчик всплывающих окон мгновенно переводит слова, предложения и текст на любом веб-сайте и отображает перевод во всплывающем окне, не покидая страницы.
Вы можете запустить переводчик всплывающих окон несколькими способами.
Выберите текст на веб-странице с помощью мыши и:
- нажмите плавающую кнопку
- щелкните правой кнопкой мыши меню «ImTranslator: Словарь переводчика, TTS», затем «Всплывающее окно»
- перевести только при выборе мышью (удалите ярлык (щелкните X) в параметрах всплывающего окна)
или используйте сочетания клавиш Ctrl + Alt (по умолчанию) до или после выделения текста.
Вы увидите перевод во всплывающем окне. По умолчанию ImTranslator Bubble автоматически определяет язык выделенного текста, поэтому все, что вам нужно сделать, это выбрать целевой язык для перевода.
Встроенный переводчик
Встроенный переводчик переводит выделенный текст построчно и вставляет перевод на веб-страницу, сохраняя исходное форматирование. В зависимости от настроек перевод может быть размещен до или после выделенного текста или даже заменить оригинал.
Чтобы получить встроенный перевод, выполните следующие действия:
- выберите текст и используйте контекстное меню «ImTranslator: Translator, Dictionary, TTS», затем выберите встроенный перевод
- или используйте сочетания клавиш Ctrl+Alt+C (по умолчанию)
Словарь ImTranslator
Словарь ImTranslator переводит отдельные слова и отображает альтернативные переводы вместе с их частями речи. В дополнение к вариантам перевода в каждой словарной статье отображается набор обратных переводов на исходный язык, если они доступны. Все словарные статьи имеют голосовую функцию в зависимости от языка (10 голосов).
Переводы Словаря можно просмотреть в приложении ImTranslator, всплывающем пузыре-переводчике или встроенном переводчике.
Перевод слов предоставлен словарем Google Translate.
Преобразование текста в голос
ImTranslator предлагает преобразование текста в голос для многих языков. Вы можете прослушать исходный текст или его перевод, нажав на значок динамика рядом с соответствующим текстовым полем.
История переводов
История переводов отслеживает все ваши действия по переводу и хранит записи о переводах в базе данных истории переводов.
Чтобы получить доступ к Истории переводов, нажмите ссылку «История» на каждом инструменте перевода или используйте параметры ImTranslator, затем вкладку «История переводов».
Записи перевода из ImTranslator, Pop-up Bubble и Inline Translator сохраняются как исходный текст с его переводом, а история переводов из веб-перевода сохраняется как ссылки на исходную страницу и переведенную страницу.
Что можно делать с историей переводов
- расширить запись перевода, если она превышает 200 символов
- разделить запись на предложения для отображения перевода по предложениям
- посмотреть источник перевода
8
8
поиск и сортировка записей перевода - прослушивание исходного текста или его перевода (10 поддерживаемых языков)
- экспорт истории переводов в формате .csv для каждого приложения перевода
- удалить записи
- очистить всю историю
Перевод веб-страницы переводит всю веб-страницу с помощью службы Google Translate. Чтобы перевести веб-страницу, выберите «Перевести эту страницу на» выбранный язык в контекстном меню «ImTranslator: Translator, Dictionary, TTS»
- перевести всю веб-страницу
- перевод текстового сегмента на странице при наведении курсора
Когда вы выбираете режим перевода при наведении курсора, наведите указатель мыши на исходный текст, и перевод выделенного сегмента отобразится во всплывающем окне. вверх пузырь.
Контекстное меню позволяет изменить язык перевода с помощью меню «Изменить язык». Вы также можете изменить язык перевода на панели инструментов перевода в верхней части веб-страницы.
Языки
Африкаанс, албанский, арабский, армянский, азербайджанский, баскский, белорусский, бенгальский, боснийский, болгарский, каталонский, кебуано, чичева, китайский (упрощенный), китайский (традиционный), хорватский, чешский, датский , голландский, английский, эстонский, эсперанто, филиппинский, финский, французский, галисийский, грузинский, немецкий, греческий, гуджарати, гаитянский креольский, хауса, иврит, хинди, хмонг, венгерский, исландский, игбо, индонезийский, ирландский, итальянский, японский, Яванский, каннада, казахский, кхмерский, корейский, латинский, латышский, литовский, македонский, малагасийский, малайский, малаялам, мальтийский, маори, маратхи, монгольский, мьянманский (бирманский), непальский, норвежский, персидский, польский, португальский, пенджаби, румынский , русский, сербский, сесото, сингальский, словацкий, словенский, сомалийский, испанский, суданский, суахили, шведский, таджикский, тамильский, телугу, тайский, турецкий, украинский, урду, узбекский, вьетнамский, валлийский, идиш, йоруба, зулу
Скачать расширение ImTranslator из каталога расширений Яндекс. Браузера.
ImTranslator
Расширение для Яндекса
Новая версия
Добавить в Яндекс
После установки кнопка ImTranslator появляется на панели инструментов Яндекса и в контекстном меню Яндекса.
Языки
Африкаанс, албанский, арабский, армянский, азербайджанский, баскский, белорусский, бенгальский, боснийский, болгарский, каталонский, кебуано, чичева, китайский (упрощенный), китайский (традиционный), хорватский, чешский, датский, голландский , английский, эстонский, эсперанто, филиппинский, финский, французский, галисийский, грузинский, немецкий, греческий, гуджарати, гаитянский креольский, хауса, иврит, хинди, хмонг, венгерский, исландский, игбо, индонезийский, ирландский, итальянский, японский, яванский, каннада, казахский, кхмерский, корейский, латинский, латышский, литовский, македонский, малагасийский, малайский, малаялам, мальтийский, маори, маратхи, монгольский, мьянманский (бирманский), непальский, норвежский, персидский, польский, португальский, панджаби, румынский, русский , сербский, сесото, сингальский, словацкий, словенский, сомалийский, испанский, суданский, суахили, шведский, таджикский, тамильский, телугу, тайский, турецкий, украинский, урду, узбекский, вьетнамский, валлийский, идиш, йоруба, зулу
Параметры ImTranslator предоставляют идеальный способ настроить приложение ImTranslator в соответствии с вашими потребностями.
Установить языковые настройки для всех переводчиков — установите этот флажок, чтобы выбранное направление перевода было доступно во всех приложениях для перевода.
Выберите исходный и целевой языки. – установите направление языка, которое вы будете использовать чаще. Этот выбор будет сохранен и использоваться по умолчанию при каждом запуске ImTranslator.
Определять исходный язык автоматически — включить автоматическое определение языка, которое проанализирует исходный текст и установит правильный язык из списка.
Включить другие переводчики — предлагает возможность использовать несколько поставщиков переводов: Microsoft Bing и Translator. Вы можете отключить другие переводчики, если хотите использовать только Google Translator, сняв этот флажок.
Включить словарь — включить словарь для перевода отдельных слов.
Показать окно обратного перевода – установите флажок, чтобы включить функцию обратного перевода.
Выберите размер шрифта — выберите размер шрифта.
Перевести с помощью сочетания клавиш — установить сочетания клавиш для перевода выделенного текста.
Вызвать переводчик — установить сочетания клавиш для запуска приложения ImTranslator.
Включить историю переводов – включить сохранение истории переводов в истории переводов.
Не забудьте Сохранить параметры , чтобы применить изменения.
Параметры встроенного переводчика
Установить языковые настройки для всех переводчиков – установите этот флажок, чтобы выбранное направление перевода было доступно во всех приложениях для перевода.
Выберите исходный и целевой языки — установите направление языка, которое вы будете использовать чаще. Этот выбор будет сохранен и использован по умолчанию при каждом запуске приложения.
Автоматически определять исходный язык — включить инструмент автоматического определения языка, который будет анализировать исходный текст и устанавливать обнаруженный язык на лету.
Включить словарь — включить словарь для перевода отдельных слов.
Перевести с помощью сочетания клавиш — назначить сочетания клавиш для перевода выделенного текста.
Очистить перевод — набор горячих клавиш для очистки встроенного перевода на веб-странице.
Цвет — выберите цвет для отображения переведенного текста на веб-странице.
Заключить в скобки — отображать перевод в скобках или без них.
Разрыв строки – выровняйте перевод как новый абзац для лучшей видимости.
Выровнять по слову — управлять выделением текста, соблюдая границы слов.
Вставить перед оригиналом — разместить перевод перед исходным текстом.
Скрыть оригинал — заменить исходный текст переводом, скрыв исходный текст.
Включить историю переводов – активировать модуль истории переводов для хранения записей переводов.
Параметры всплывающих окон
Задать языковые настройки для всех переводчиков — установите этот флажок, чтобы выбранное направление перевода было доступно во всех приложениях для перевода.
Выбор исходного и целевого языков – установите направление языка, которое вы будете использовать чаще. Этот выбор будет сохранен и использоваться по умолчанию при каждом запуске ImTranslator.
Автоматически определять исходный язык — установите этот флажок, чтобы разрешить переводчику определять язык выделенного текста.
Включить другие переводчики — дает возможность использовать несколько поставщиков услуг перевода: Microsoft Bing и Translator в дополнение к Google Translator. Вы можете отключить другие переводчики, если хотите использовать Google Translator, только сняв этот флажок.
Включить всплывающую подсказку ImTranslator — установите этот флажок, чтобы сделать подсказку ImTranslator доступной. Если этот параметр отключен, ImTranslator Bubble не будет всплывать.
Включить словарь – установите этот флажок, чтобы включить словарь для перевода отдельных слов.
Показать кнопку переводчика — установите этот флажок, чтобы активировать плавающую кнопку перевода над текстом, который вы выбрали для перевода.
Закрепить всплывающее окно – закрепить всплывающее окно всплывающего окна с правой стороны веб-страницы, чтобы оно было видно при прокрутке страницы.
Выбрать размер шрифта — изменить размер шрифта (мелкий или крупный).
Перевести с помощью сочетания клавиш — назначить сочетания клавиш для перевода выделенного текста.
Переводить по двойному щелчку — установите этот флажок, чтобы переводить отдельные слова по двойному щелчку мыши.
Включить историю переводов – включить модуль истории переводов для хранения записей переводов.
Сохраните параметры , чтобы применить изменения.
Параметры перевода веб-страницы
Установить языковые настройки для всех переводчиков – установите этот флажок, чтобы выбранное направление перевода было доступно во всех приложениях для перевода
Выберите исходный и целевой язык – выберите желаемое направление языка использовать чаще. Этот выбор будет сохранен и использоваться по умолчанию при каждом запуске ImTranslator.
Включить историю переводов — активировать модуль истории переводов для хранения записей переводов.
Сохраните параметры , чтобы применить изменения.
Параметры истории переводов
Чтобы получить доступ к истории переводов, нажмите ссылку «История» на каждом инструменте перевода или перейдите в «Параметры ImTranslator», затем вкладку «История переводов».
Записи перевода из ImTranslator и Pop-up Bubble сохраняются как исходный текст и его перевод, а история переводов из перевода веб-страницы хранится как ссылки на исходную страницу и переведенную страницу.
Что можно делать с историей переводов
- расширить запись перевода, если она превышает 200 символов
- разделить запись на предложения для отображения перевода по предложениям
- посмотреть источник перевода
8
8
поиск и сортировка записей перевода - прослушивание оригинала или перевода (26 поддерживаемых языков)
- экспорт истории переводов в формате .csv
- удаление записей
- Clear All History
Imtranslator для учебника Yandex
Предыдущий следующий
Imtranslator включает в себя 4 Инструменты перевода: I Nline Translator , Pop-uppure Translator . 90 101 приложений.
ImTranslator выполняет мгновенный перевод слов, фраз, текстов и веб-страниц между 91 языком.
9Приложение 0100 Inline Translator переводит выделенный текст на странице, разделяя его на предложения.
Затем он вставляет перевод на веб-страницу после или перед исходным предложением или просто заменяет выделенное.
После установки ImTranslator сразу становится доступен в виде кнопки на панели инструментов.
Чтобы начать использовать ImTranslator, выделите текст на веб-странице и нажмите кнопку «ImTranslator: Translator, Dictionary, TTS» на панели инструментов Яндекса или просто используйте сочетания клавиш Ctrl+Alt+Z (по умолчанию), чтобы открыть приложение ImTranslator.
Вы также можете выделить текст на странице и выбрать «Встроенный перевод» в контекстном меню, вызываемом правой кнопкой мыши.
Или вы можете выделить текст на странице и выбрать «ImTranslator: Перевести выделение» в контекстном меню, вызываемом правой кнопкой мыши.
Появится отдельное приложение ImTranslator с исходным текстом и его переводом.
Если вы не знаете язык исходного текста, выберите «Определить язык», чтобы ImTranslator определил язык вашего текста.
Когда выполняется автоматическое определение языка, появляется метка «Обнаружено: язык».
Используйте обратный перевод для проверки точности перевода. Обратный перевод, если он отмечен, переводит целевой текст обратно на исходный язык.
Сравнение обратного перевода с оригинальным текстом иногда используется для проверки качества оригинального перевода.
Нажмите кнопку «Прослушать», чтобы прослушать устную версию текста.
В настоящее время эта функция доступна для 10 языков.
Используйте словарь для перевода отдельных слов, чтобы увидеть альтернативные переводы вместе с частью речи.
Словарь охватывает более 90 языковых комбинаций с английским языком и другими языковыми парами.
Если вы выберете более одного слова для перевода, вы получите обычный перевод, сделанный Google Translate.
Используйте параметры ImTranslator, чтобы настроить переводчик в соответствии с вашими потребностями.
Переводчик Pop-up Bubble Translator быстро переводит слова, предложения и текст на любом веб-сайте. Пузырьковый переводчик отображает перевод во всплывающем окне, не покидая страницы.
Чтобы перевести с помощью всплывающего окна, выберите текст на веб-странице с помощью мыши и нажмите плавающую кнопку. Или удерживайте сочетание клавиш Ctrl + Alt (по умолчанию) при выборе текста для перевода.
Всплывающий пузырь Переводчик включает функцию речи.
Нажмите значок «Слушать» на панели инструментов, чтобы активировать голос.
ImTranslator Bubble может переводить выделенный текст только при выборе мышью, без сочетания клавиш. Чтобы использовать этот режим, откройте «Параметры» и удалите клавишу быстрого доступа из поля быстрого доступа. Метка «Нет» появляется в меню клавиш.
ImTranslator Bubble можно настроить в этом окне. Вы можете запустить ImTranslator Bubble с помощью плавающей кнопки или с/без сочетания клавиш. Вы можете закрепить ImTranslator Bubble в правой части веб-страницы, а также изменить размер шрифта (маленький или крупный). Здесь вы также можете включить историю переводов.
Перевод веб-страниц переводит всю веб-страницу между 91 языком с помощью службы Google Translation.
Чтобы перевести веб-страницу, выберите «Перевести эту страницу на» на выбранный язык в контекстном меню правой кнопки мыши «ImTranslator: Переводчик, Словарь, TTS».
Контекстное меню правой кнопки мыши позволяет выбрать режим перевода веб-страницы: перевод всей веб-страницы или перевод при наведении курсора мыши.